代课下单代码优化，修复部分问题

src/views/table/components/table-diancan.vue

@@ -144,7 +144,7 @@
                     <el-button
                       size="medium"
                       :disabled="!order.list.length"
-                      @click="createOrderShow"
+                      @click="toPay"
                     >
                       去结账
                     </el-button>
@@ -154,7 +154,7 @@
                     class="my-btn flex-1 success"
                     :class="{ disabled: !order.list.length }"
                     :disabled="!order.list.length"
-                    @click="createOrderShow"
+                    @click="toPay"
                   >
                     <span>去结账</span>
                   </button> -->
@@ -177,7 +177,7 @@
                   class="my-btn flex-1 default"
                   :class="{ disabled: !order.list.length }"
                   :disabled="!order.list.length"
-                  @click="createOrderShow"
+                  @click="toPay"
                 >
                   <span>去结账</span>
                 </button>
@@ -921,7 +921,7 @@ export default {
       },
       order: {
         payType: "",
-        masterId:'',
+        masterId: "",
         allPack: false,
         btns: [
           {
@@ -1084,11 +1084,14 @@ export default {
     },
   },
   watch: {
+    masterId:function(val){
+      console.log(val)
+    },
     "vipUser.id": async function (val) {
-      let masterId=this.order.masterId
+      let masterId = this.order.masterId;
-      if(!masterId){
+      if (!masterId) {
         const res = await this.getMasterId();
-        masterId=res.masterId
+        masterId = res.masterId;
       }
       this.masterId = masterId;
       $setUser({
@@ -1232,7 +1235,6 @@ export default {
     },
     // 支付订单
     async payOrder() {
-      return this.payOrderSuccess();
       console.log({
         orderId: this.createOrder.data.id,
         payType: this.order.payType,
@@ -1251,6 +1253,7 @@ export default {
         type: "success",
       });
       this.reset();
+      this.close()
     },
     chooseTableConfirm(item) {
       console.log(item);
@@ -1273,18 +1276,18 @@ export default {
     createOrderClose() {
       this.isCreateOrder = false;
     },
-    async createOrderShow() {
+    //生成订单
+    async toPay() {
       const res = await $createOrder({
-        masterId:this.order.masterId||this.masterId,
+        masterId: this.order.masterId || this.masterId,
         vipUserId: this.vipUser.id,
         tableId: this.table.tableId,
-        note: this.note.content
+        note: this.note.content,
       });
       this.createOrder.data = res;
       const masterId = await this.getMasterId();
       this.masterId = masterId;
       this.isCreateOrder = true;
-
     },
 
     // 获取取餐号
@@ -1300,6 +1303,7 @@ export default {
     changePrveOrder(index) {
       this.prveOrder.sel = index;
     },
+    //更新购物车商品数据
     updateOrder(par = {}) {
       let item = this.order.list[this.order.selIndex];
       console.log(item.specSnap);
@@ -1363,6 +1367,8 @@ export default {
     //     return { ...v, cart: JSON.parse(v.cart) };
     //   });
     // },
+
+    //右侧控制按钮点击事件
     orderBtnsClick(key) {
       const orderGoods = this.order.list[this.order.selIndex];
       this.createOrderClose();
@@ -1430,35 +1436,35 @@ export default {
         isPending: false,
       });
       this.masterId = masterId;
-      console.log(masterId)
+      console.log(masterId);
       const { records } = await getCart({
         masterId,
         tableId,
         vipUserId: userId != "null" ? userId : "",
       });
       console.log(records);
-      this.order.masterId=masterId
+      this.order.masterId = masterId;
       this.order.list = records;
       this.prveOrder.show = false;
-      return;
+      this.delPrveOrder(false);
-      this.order.list = this.prveOrder.list[this.prveOrder.sel].carList;
-      this.delPrveOrder();
-      this.prveOrder.show = false;
     },
     //删除挂单
-    async delPrveOrder() {
+    async delPrveOrder(isRequest = true) {
       const { sel } = this.prveOrder;
       const order = this.prveOrder.list[sel];
-      const res = await $delOrder({
+      if (isRequest) {
-        orderId: order.orderId,
+        const res = await $delOrder({
-      });
+          orderId: order.orderId,
-      this.$notify({
+        });
-        message: "删除成功",
+        this.$notify({
-        type: "success",
+          message: "删除成功",
-      });
+          type: "success",
+        });
+      }
       this.prveOrder.list.splice(sel, 1);
       this.prveOrder.sel = sel - 1 <= 0 ? 0 : sel - 1;
     },
+    //打开挂起订单
     cacheOrderShow() {
       this.prveOrder.show = true;
     },
@@ -1468,6 +1474,7 @@ export default {
       console.log(res);
       this.prveOrder.list = res;
     },
+    //存单
     async saveOrder() {
       const res = await $cacheOrder({
         masterId: this.masterId,
@@ -1475,11 +1482,11 @@ export default {
         vipUserId: this.vipUser.id,
         isPending: true,
       });
-      this.order.masterId='';
+      this.order.masterId = "";
       this.order.list = [];
       this.order.selIndex = -1;
-      const masterId = await this.getMasterId();
+      const masterIdRes = await this.getMasterId();
-      this.masterId = masterId;
+      this.masterId = masterIdRes.masterId;
       this.$nextTick(() => {
         this.getCacheOrder();
       });
@@ -1500,6 +1507,7 @@ export default {
       //         message: "清除成功!",
       //       });
     },
+    // 点击订单里的加减改变购物车商品数量
     async changeOrderNumber(index, isReduce) {
       if (index < 0) {
         return;
@@ -1526,6 +1534,7 @@ export default {
       this.order.number = newval;
       this.order.cacheNumber = newval;
     },
+    // 点击右侧控制列表上的加减改变购物车商品数量
     changeOrderGoodsNumber(isReduce) {
       if (this.order.selIndex < 0) {
         return;
@@ -1546,6 +1555,7 @@ export default {
       this.order.number = newval;
       this.order.cacheNumber = newval;
     },
+    //清空购物车
     clearCart() {
       if (this.order.list.length <= 0) {
         return;
@@ -1787,7 +1797,7 @@ export default {
     },
     reset() {
       // this.goods.list = [];
-      this.order.masterId='';
+      this.order.masterId = "";
       this.order.list = [];
       this.order.query.page = 1;
       this.goods.total = 0;
@@ -1813,31 +1823,12 @@ export default {
       this.selGoods.data = item;
       this.selGoods.skuMap = {};
       const specList = item.specList;
-      for (let i in specList) {
+      this.setSelGoodsSkuMap(specList)
-        this.selGoods.skuMap[specList[i].specSnap] = specList[i];
+      this.setSelGoodsSkuList(JSON.parse(item.skuResult.tagSnap),item.specSnap)
-      }
+      this.setTagDisabled()
-      console.log(this.selGoods.skuMap);
+      const skuGoods = this.selGoods.skuMap[item.specSnap];
-      let specSnap = "";
-      let specSnapArr = item.specSnap ? item.specSnap.split(",") : [];
-      this.selGoods.skuList = JSON.parse(item.skuResult.tagSnap).map(
-        (v, index) => {
-          const values = v.value.split(",");
-          specSnap += values[0] + ",";
-          return {
-            ...v,
-            values: values,
-            sel: specSnapArr.length ? specSnapArr[index] : values[0],
-          };
-        }
-      );
-      specSnap = item.specSnap
-        ? item.specSnap
-        : specSnap.substring(0, specSnap.length - 1);
-      const skuGoods = this.selGoods.skuMap[specSnap];
       this.skuGoods.data = skuGoods;
-      console.log(skuGoods);
       this.skuGoods.number = item.number ? item.number : skuGoods.suit || 1;
-      console.log(this.skuGoods.data);
       this.selGoods.title = item.name;
       this.selGoods.show = true;
     },
@@ -1974,31 +1965,26 @@ export default {
         });
       }
       this.setTagDisabled();
-      // console.log(goods)
+    },
-      // const includeSkuMap = goodsList.reduce((prve, cur) => {
+    // 设置当前选中商品skuList
-      //   const speArr = cur.specSnap.split(",");
+    setSelGoodsSkuList(skuList,specSnap) {
-      //   for (let i of speArr) {
+      const specSnapArr=specSnap?specSnap.split(","):[]
-      //     if (!prve.hasOwnProperty("i")) {
+      this.selGoods.skuList = skuList.map((v,index) => {
-      //       prve[i] = goodsList
+          const values = v.value.split(",");
-      //         .filter((v) => v.specSnap.match(i))
+          return {
-      //         .every((v) => {
+            ...v,
-      //           return (
+            valueArr: values,
-      //             !v.isGrounding || v.isPauseSale == 1 || v.stockNumber <= 0
+            sel:specSnap?specSnapArr[index]:'',
-      //           );
+            values: values.map((name) => {
-      //         });
+              return { name, disabled: false };
-      //     }
+            }),
-      //   }
+          };
-      //   return prve;
+        });
-      // }, {});
+    },
-      // console.log(includeSkuMap);
+    setSelGoodsSkuMap(specList) {
-      // for (let i in includeSkuMap) {
+      for (let i in specList) {
-      //   for (let k in skuList) {
+          this.selGoods.skuMap[specList[i].specSnap] = specList[i];
-      //     const index = skuList[k].valueArr.findIndex((val) => val === i);
+        }
-      //     if (index !== -1) {
-      //       this.$set(skuList[k].values[index], "disabled", includeSkuMap[i]);
-      //     }
-      //   }
-      // }
     },
     //根据右侧商品单规格多规格做不同处理
     async goodsClick(item) {
@@ -2006,31 +1992,10 @@ export default {
         this.selGoods.data = item;
         this.selGoods.skuMap = {};
         const specList = item.specList;
-        for (let i in specList) {
+        this.setSelGoodsSkuMap(specList)
-          this.selGoods.skuMap[specList[i].specSnap] = specList[i];
-        }
         console.log(this.selGoods.skuMap);
-        let specSnap = "";
+        this.setSelGoodsSkuList( JSON.parse(item.skuResult.tagSnap))
-        // const canBudyGoods=specList.filter(v=>v)
-        this.selGoods.skuList = JSON.parse(item.skuResult.tagSnap).map((v) => {
-          const values = v.value.split(",");
-          // specSnap += values[0] + ",";
-          return {
-            ...v,
-            valueArr: values,
-            values: values.map((name) => {
-              return { name, disabled: false };
-            }),
-            // sel: values[0],
-            // sel: values[0],
-          };
-        });
-
-        // specSnap = specSnap.substring(0, specSnap.length - 1);
-        // const skuGoods = this.selGoods.skuMap[specSnap];
         this.setSkugoodsDefaultInit();
-        // this.skuGoods.data = skuGoods;
-        // this.skuGoods.number = skuGoods.suit || 1;
         this.selGoods.title = item.name;
         this.selGoods.show = true;
         return;
@@ -2181,6 +2146,11 @@ input[type="number"]::-webkit-outer-spin-button {
   padding-top: 12px;
   padding-bottom: 12px;
 }
+// ::v-deep .el-button.is-plain:hover, .el-button.is-plain:focus{
+//   background: rgba(34, 191, 100, .1);
+//     color: #22bf64;
+//     border: 1px solid #22bf64;
+// }
 
 ::v-deep .number-box .el-input__inner::-webkit-inner-spin-button {
   -webkit-appearance: none;

src/views/table/table_list.vue

@@ -1,275 +1,323 @@
 <template>
-    <div class="app-container">
+  <div class="app-container">
-        <el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
+    <el-tabs v-model="tabVlaue" type="card" @tab-click="tabClick">
-            <el-tab-pane label="全部" name=""></el-tab-pane>
+      <el-tab-pane label="全部" name=""></el-tab-pane>
-            <el-tab-pane v-for="item in tabs" :key="item.id" :label="item.name" :name="`${item.id}`">
+      <el-tab-pane
-                <div slot="label">
+        v-for="item in tabs"
-                    {{ item.name }}
+        :key="item.id"
-                    <i class="icon el-icon-edit" @click.stop="$refs.addEara.show(item)"></i>
+        :label="item.name"
-                    <el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
+        :name="`${item.id}`"
-                        <i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
+      >
-                    </el-popconfirm>
+        <div slot="label">
-                </div>
+          {{ item.name }}
-            </el-tab-pane>
+          <i
-        </el-tabs>
+            class="icon el-icon-edit"
-        <div class="head-container">
+            @click.stop="$refs.addEara.show(item)"
-            <div class="filter_wrap">
+          ></i>
-                <el-button icon="el-icon-plus" @click="$refs.addEara.show()">添加区域</el-button>
+          <el-popconfirm title="确定删除吗？" @confirm="delHandle([item.id])">
-                <el-button type="primary" icon="el-icon-plus" @click="$refs.addTable.show()">添加台桌</el-button>
+            <i class="icon el-icon-delete" slot="reference" @click.stop=""></i>
-                <el-button type="primary" icon="el-icon-download" @click="$refs.downloadTableCode.show()">
+          </el-popconfirm>
-                    下载台桌码
-                </el-button>
-                <el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
-            </div>
         </div>
-        <div class="head-container">
+      </el-tab-pane>
-            <div class="table_list" v-loading="loading">
+    </el-tabs>
-                <div class="item" v-for="item in tableList" :key="item.id">
+    <div class="head-container">
-                    <div class="top">
+      <div class="filter_wrap">
-                        <div class="row row1">
+        <el-button icon="el-icon-plus" @click="$refs.addEara.show()"
-                            <span>{{ item.name }}</span>
+          >添加区域</el-button
-                            <div class="state">
+        >
-                                <span class="dot" :style="{ backgroundColor: status[item.status].type }"></span>
+        <el-button
-                                {{ status[item.status].label }}
+          type="primary"
-                            </div>
+          icon="el-icon-plus"
-                        </div>
+          @click="$refs.addTable.show()"
-                        <div class="row">
+          >添加台桌</el-button
-                            <el-tag type="warning" size="mini">{{ item.type == 0 ? '低消' : '计时' }}</el-tag>
+        >
-                            <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{ item.isPredate == 1 ? '可预约'
+        <el-button
-                                : '不可预约' }}</el-tag>
+          type="primary"
-                        </div>
+          icon="el-icon-download"
-                        <div class="row">
+          @click="$refs.downloadTableCode.show()"
-                            <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
+        >
-                        </div>
+          下载台桌码
-                        <div class="row">
+        </el-button>
-                            <el-button type="primary" :disabled="!item.tableId" @click="diancanShow(item)">点餐</el-button>
+        <el-button type="primary" icon="el-icon-download">下载店铺码</el-button>
-                        </div>
+      </div>
-                    </div>
+    </div>
-                    <div class="btm">
+    <div class="head-container">
-                        <!-- <div class="btm_item">
+      <div class="table_list" v-loading="loading">
+        <div class="item" v-for="item in tableList" :key="item.id">
+          <div class="top">
+            <div class="row row1">
+              <span>{{ item.name }}</span>
+              <div class="state">
+                <span
+                  class="dot"
+                  :style="{ backgroundColor: status[item.status].type }"
+                ></span>
+                {{ status[item.status].label }}
+              </div>
+            </div>
+            <div class="row">
+              <el-tag type="warning" size="mini">{{
+                item.type == 0 ? "低消" : "计时"
+              }}</el-tag>
+              <el-tag :type="item.isPredate == 1 ? '' : 'info'" size="mini">{{
+                item.isPredate == 1 ? "可预约" : "不可预约"
+              }}</el-tag>
+            </div>
+            <div class="row">
+              <span class="tips">客座次数：{{ item.maxCapacity }}人</span>
+            </div>
+            <div class="row">
+              <el-button
+                type="primary"
+                :disabled="!item.tableId"
+                @click="diancanShow(item)"
+                >点餐</el-button
+              >
+            </div>
+          </div>
+          <div class="btm">
+            <!-- <div class="btm_item">
                             <i class="i el-icon-edit"></i>
                         </div> -->
-                        <div class="btm_item" @click="$refs.addTable.show(item)">
+            <div class="btm_item" @click="$refs.addTable.show(item)">
-                            <i class="i el-icon-edit"></i>
+              <i class="i el-icon-edit"></i>
-                        </div>
-                        <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([item.id])" style="flex: 1;">
-                            <div class="btm_item" slot="reference">
-                                <i class="i el-icon-delete"></i>
-                            </div>
-                        </el-popconfirm>
-                    </div>
-                </div>
-                <div class="empty_wrap">
-                    <el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
-                </div>
             </div>
+            <el-popconfirm
+              title="确定删除吗？"
+              @confirm="delTableHandle([item.id])"
+              style="flex: 1"
+            >
+              <div class="btm_item" slot="reference">
+                <i class="i el-icon-delete"></i>
+              </div>
+            </el-popconfirm>
+          </div>
         </div>
-        <addEara ref="addEara" @success="tbShopAreaGet" />
+        <div class="empty_wrap">
-        <addTable ref="addTable" @success="tbShopTableGet" />
+          <el-empty description="空空如也~" v-if="!tableList.length"></el-empty>
-        <downloadTableCode :total="total" ref="downloadTableCode" />
+        </div>
-
+      </div>
-        <!-- 点餐 -->
-         <table-diancan ref="dianan"></table-diancan>
     </div>
+    <addEara ref="addEara" @success="tbShopAreaGet" />
+    <addTable ref="addTable" @success="tbShopTableGet" />
+    <downloadTableCode :total="total" ref="downloadTableCode" />
+
+    <!-- 点餐 -->
+    <table-diancan ref="dianan"></table-diancan>
+  </div>
 </template>
 
 <script>
-import addEara from './components/addEara'
+import addEara from "./components/addEara";
-import addTable from './components/addTable'
+import addTable from "./components/addTable";
-import downloadTableCode from './components/downloadTableCode'
+import downloadTableCode from "./components/downloadTableCode";
-import tableDiancan from './components/table-diancan.vue'
+import tableDiancan from "./components/table-diancan.vue";
-import { tbShopTableGet, tbShopAreaGet, tbShopAreaDelete, tbShopTableDelete } from '@/api/table'
+import {
+  tbShopTableGet,
+  tbShopAreaGet,
+  tbShopAreaDelete,
+  tbShopTableDelete,
+} from "@/api/table";
 export default {
-    components: {
+  components: {
-        addEara,
+    addEara,
-        addTable,
+    addTable,
-        downloadTableCode,
+    downloadTableCode,
-        tableDiancan
+    tableDiancan,
+  },
+  data() {
+    return {
+      tabVlaue: "",
+      tabs: [],
+      loading: false,
+      total: 0,
+      tableList: [],
+      status: {
+        pending:{
+            label: "挂单中",
+            type: "#E6A23C",
+        },
+        idle: {
+          label: "空闲",
+          type: "#67C23A",
+        },
+        subscribe: {
+          label: "预定",
+          type: "#E6A23C",
+        },
+        closed: {
+          label: "关台",
+          type: "#F56C6C",
+        },
+        opening: {
+          label: "开台中",
+          type: "#67C23A",
+        },
+        cleaning: {
+          label: "台桌清理中",
+          type: "#909399",
+        },
+      },
+    };
+  },
+  mounted() {
+    this.tbShopAreaGet();
+  },
+  methods: {
+    diancanShow(item) {
+      this.$refs.dianan.open(item);
     },
-    data() {
+    tabClick() {
-        return {
+      this.tbShopTableGet();
-            tabVlaue: '',
-            tabs: [],
-            loading: false,
-            total: 0,
-            tableList: [],
-            status: {
-                subscribe: {
-                    label: '预定',
-                    type: '#E6A23C'
-                },
-                closed: {
-                    label: '关台',
-                    type: '#F56C6C'
-                },
-                opening: {
-                    label: '开台中',
-                    type: '#67C23A'
-                },
-                cleaning: {
-                    label: '台桌清理中',
-                    type: '#909399'
-                }
-            }
-        }
     },
-    mounted() {
+    // 删除桌台
-        this.tbShopAreaGet()
+    async delTableHandle(ids) {
+      try {
+        await tbShopTableDelete(ids);
+        this.tbShopTableGet();
+      } catch (error) {
+        console.log(error);
+      }
     },
-    methods: {
+    // 删除区域
-        diancanShow(item){
+    async delHandle(ids) {
-            this.$refs.dianan.open(item)
+      try {
-        },
+        await tbShopAreaDelete(ids);
-        tabClick() {
+        this.tabVlaue = "";
-            this.tbShopTableGet()
+        this.tbShopAreaGet();
-        },
+      } catch (error) {
-        // 删除桌台
+        console.log(error);
-        async delTableHandle(ids) {
+      }
-            try {
+    },
-                await tbShopTableDelete(ids)
+    // 台桌列表
-                this.tbShopTableGet()
+    async tbShopTableGet() {
-            } catch (error) {
+      this.loading = true;
-                console.log(error)
+      try {
-            }
+        const { content, total } = await tbShopTableGet({
-        },
+          shopId: localStorage.getItem("shopId"),
-        // 删除区域
+          areaId: this.tabVlaue,
-        async delHandle(ids) {
+        });
-            try {
+        console.log(content);
-                await tbShopAreaDelete(ids)
+        this.tableList = content;
-                this.tabVlaue = ''
+        this.total = total;
-                this.tbShopAreaGet()
+        setTimeout(() => {
-            } catch (error) {
+          this.loading = false;
-                console.log(error)
+        }, 300);
-            }
+      } catch (error) {
-        },
+        this.loading = false;
-        // 台桌列表
+        console.log(error);
-        async tbShopTableGet() {
+      }
-            this.loading = true
+    },
-            try {
+    // 获取区域
-                const { content, total } = await tbShopTableGet({
+    async tbShopAreaGet() {
-                    shopId: localStorage.getItem('shopId'),
+      try {
-                    areaId: this.tabVlaue
+        const { content } = await tbShopAreaGet({
-                })
+          shopId: localStorage.getItem("shopId"),
-                this.tableList = content
+        });
-                this.total = total
+        this.tabs = content;
-                setTimeout(() => {
+        this.tbShopTableGet();
-                    this.loading = false
+      } catch (error) {
-                }, 300)
+        console.log(error);
-            } catch (error) {
+      }
-                this.loading = false
+    },
-                console.log(error)
+  },
-            }
+};
-        },
-        // 获取区域
-        async tbShopAreaGet() {
-            try {
-                const { content } = await tbShopAreaGet({
-                    shopId: localStorage.getItem('shopId')
-                })
-                this.tabs = content
-                this.tbShopTableGet()
-            } catch (error) {
-                console.log(error)
-            }
-        }
-    }
-}
 </script>
 
 <style>
 .el-tabs {
-    margin-bottom: 0;
+  margin-bottom: 0;
 }
 </style>
 <style scoped lang="scss">
 .icon {
-    margin-left: 10px;
+  margin-left: 10px;
 }
 
 .table_list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  min-height: 150px;
+
+  .empty_wrap {
+    flex: 1;
     display: flex;
-    flex-wrap: wrap;
+    justify-content: center;
-    gap: 20px;
+  }
-    min-height: 150px;
 
-    .empty_wrap {
+  .item {
-        flex: 1;
+    border: 1px solid #ddd;
+
+    .top {
+      padding: 20px;
+
+      .row {
         display: flex;
-        justify-content: center;
+        gap: 10px;
-    }
 
-    .item {
+        .tips {
-        border: 1px solid #ddd;
+          font-size: 12px;
-
-        .top {
-            padding: 20px;
-
-            .row {
-                display: flex;
-                gap: 10px;
-
-                .tips {
-                    font-size: 12px;
-                }
-
-                &:not(:first-child) {
-                    margin-top: 20px;
-                }
-
-                &.row1 {
-                    justify-content: space-between;
-                    font-size: 14px;
-
-                    .state {
-                        display: flex;
-                        align-items: center;
-                        margin-left: 80px;
-
-                        .dot {
-                            $size: 6px;
-                            width: $size;
-                            height: $size;
-                            border-radius: 50%;
-                            margin-right: $size;
-                        }
-                    }
-                }
-            }
         }
 
-        .btm {
+        &:not(:first-child) {
-            border-top: 1px solid #ddd;
+          margin-top: 20px;
-            background-color: #efefef;
+        }
+
+        &.row1 {
+          justify-content: space-between;
+          font-size: 14px;
+
+          .state {
             display: flex;
+            align-items: center;
+            margin-left: 80px;
 
-            .btm_item {
+            .dot {
-                flex: 1;
+              $size: 6px;
-                height: 40px;
+              width: $size;
-                display: flex;
+              height: $size;
-                align-items: center;
+              border-radius: 50%;
-                justify-content: center;
+              margin-right: $size;
-                position: relative;
-
-                &:hover {
-                    cursor: pointer;
-                }
-
-                &:nth-child(1) {
-                    &::before {
-                        content: '';
-                        height: 50%;
-                        border-right: 1px solid #ddd;
-                        position: absolute;
-                        top: 25%;
-                        right: 0;
-                    }
-                }
-
-                .i {
-                    color: #666;
-                }
             }
+          }
         }
+      }
     }
+
+    .btm {
+      border-top: 1px solid #ddd;
+      background-color: #efefef;
+      display: flex;
+
+      .btm_item {
+        flex: 1;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &:nth-child(1) {
+          &::before {
+            content: "";
+            height: 50%;
+            border-right: 1px solid #ddd;
+            position: absolute;
+            top: 25%;
+            right: 0;
+          }
+        }
+
+        .i {
+          color: #666;
+        }
+      }
+    }
+  }
 }
 </style>