liebao-web/src/components/settingComponents/print/greetingCardPrinter.vue

<template>
  <div class="card-print">
    <div class="model">
      <div class="title">
        <div class="name">贺卡打印</div>
      </div>
      <div class="printer-list">
        <div class="item" v-for="(v,i) in printerList" :key="i">
          <img class="img" :src="require(`../../../../static/image/printer-online-1.png`)" alt="">
          <div class="name">{{v.name}}</div>
          <div class="shop-name">{{v.shopName}}</div>
          <div class="btns">
            <!-- <img @click.stop="printTest(v)" src="../../../../static/image/print-icon.png" alt=""> -->
            <img @click.stop="addPrinter(v)" src="../../../../static/image/edit-icon.png" alt="">
            <img @click.stop="deletePrinter(v)" src="../../../../static/image/delete-icon.png" alt="">
          </div>
        </div>
        <div class="item" @click.stop="addPrinter('')">
          <img class="img" src="../../../../static/image/icon-add.png" alt="">
          <div class="name">添加打印云盒</div>
          <div class="shop-name"> </div>
        </div>
      </div>
      <div class="setting-model">
        <div class="list">
          <div class="item" v-for="(v,i) in list" :key=i>
            <div class="left">
              <div class="left-top">
                <div class="name">{{v.name}}</div>
              </div>
              <div class="left-bot">{{v.tips}}</div>
            </div>
            <div class="right">
              <el-switch @change="change(v)" v-model="v.value" :active-value="1" :inactive-value="0" active-color="#FC7200" inactive-color="#999" />
            </div>
          </div>
          <div class="item">
            <div class="left">
              <div class="left-top">
                <div class="name">设置贺卡样式</div>
              </div>
              <div class="left-bot">设置贺卡尺寸、间距以及字体样式</div>
            </div>

          </div>
          <div class="card-setting">
            <div class="card-left" :style="`max-height: ${params.cardHeight}mm;max-width: ${params.cardWidth}mm;`">
              <i class="el-icon-arrow-down icon1" :style="`top:${params.paddingTop}mm;left:${params.paddingLeft}mm;`"></i>
              <i class="el-icon-arrow-down icon2" :style="`top:${params.paddingTop}mm;right:${params.paddingRight}mm;`"></i>
              <i class="el-icon-arrow-down icon3" :style="`bottom:${params.paddingBottom}mm;left:${params.paddingLeft}mm;`"></i>
              <i class="el-icon-arrow-down icon4" :style="`bottom:${params.paddingBottom}mm;right:${params.paddingRight}mm;`"></i>
              <div v-html="cardHtml"></div>
            </div>
            <div class="card-right">
              <div class="setting-params">
                <div class="card-title">所属门店<div class="card-tip">&emsp;(设置门店专属贺卡样式)</div>
                </div>
                <el-select v-model="params.shopIdList" multiple @change="changeShop" clearable>
                  <el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.name">
                    <div>{{ item.name }}</div>
                  </el-option>
                </el-select>
              </div>
              <div class="setting-params">
                <div class="card-title">贺卡字体</div>
                <el-select v-model="params.fontFamily">
                  <el-option v-for="item in fonts" :key="item.value" :value="item.value" :label="item.name">
                    <div :style="`font-family: ${item.value};font-size:20px;`">{{ item.name }}</div>
                  </el-option>
                </el-select>
              </div>
              <div class="setting-params">
                <div class="card-title">打印方向</div>
                <el-select v-model="params.direction">
                  <el-option v-for="item in directonList" :key="item.value" :value="item.value" :label="item.name">
                    <div>{{ item.name }}</div>
                  </el-option>
                </el-select>
              </div>
              <div class="setting-params">
                <div class="card-title">内容位置</div>
                <el-select v-model="params.textAlign">
                  <el-option v-for="item in textAlignList" :key="item.value" :value="item.value" :label="item.name">
                    <div>{{ item.name }}</div>
                  </el-option>
                </el-select>
              </div>
              <div class="setting-params">
                <div class="card-title">贺卡尺寸类型</div>
                <el-select v-model="params.sizeType" @change="changeDmPaperSize">
                  <el-option v-for="item in paperSize" :key="item.value" :value="item.value" :label="item.name">
                    <div>{{ item.name }}</div>
                  </el-option>
                </el-select>
              </div>
              <div class="setting-params">
                <div class="card-title">贺卡尺寸</div>
                <el-input :disabled="[9,11].includes(params.sizeType)" v-model="params.cardWidth">
                  <template slot="prepend">宽</template>
                  <template slot="append">毫米</template>
                </el-input>
                <el-input :disabled="[9,11].includes(params.sizeType)" v-model="params.cardHeight">
                  <template slot="prepend">高</template>
                  <template slot="append">毫米</template>
                </el-input>
              </div>
              <div class="setting-params">
                <div class="card-title">贺卡内容间距</div>
                <el-input v-model="params.paddingTop">
                  <template slot="prepend">上</template>
                  <template slot="append">毫米</template>
                </el-input>
                <el-input v-model="params.paddingBottom">
                  <template slot="prepend">下</template>
                  <template slot="append">毫米</template>
                </el-input>
                <el-input v-model="params.paddingLeft">
                  <template slot="prepend">左</template>
                  <template slot="append">毫米</template>
                </el-input>
                <el-input v-model="params.paddingRight">
                  <template slot="prepend">右</template>
                  <template slot="append">毫米</template>
                </el-input>
              </div>
              <div class="btns">
                <el-button size="small" @click="saveCard" type="warning">保存贺卡</el-button>
                <el-button size="small" @click="printTest">打印测试页</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增、编辑云盒 -->
    <el-dialog title="云盒管理" :visible.sync="dialogVisible" width="600px">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="云盒名称">
          <el-input v-model="form.name" clearable placeholder="请自定义云盒名称"></el-input>
        </el-form-item>
        <el-form-item label="云盒序列号">
          <el-input v-model="form.deviceSn" clearable placeholder="请填写云盒序列号"></el-input>
        </el-form-item>
        <el-form-item label="云盒秘钥">
          <el-input v-model="form.deviceSecret" clearable placeholder="请填写云盒秘钥"></el-input>
        </el-form-item>
        <el-form-item label="关联门店">
          <el-select style="width:300px;" clearable v-model="form.shopIdList" multiple @change="changePrinterShop" max-width="300px">
            <el-option v-for="item in shopList" :key="item.id" :value="item.id" :label="item.name">
              <div>{{ item.name }}</div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择打印机">
          <el-select style="width:300px;" v-model="form.deviceName" placeholder="请选择打印机">
            <el-option v-for="item in cloudList" :key="item.id" :value="`${ item.printerName }(USB${item.port})`">
              <div>{{ item.printerName }}(USB{{item.port}})</div>
            </el-option>
          </el-select>
          <el-button type="success" @click="getCloudPrinterInfo">获取打印机信息</el-button>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="cloudPrinterManager">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getNewShopList,
  getCloudDevice,
  deviceAdd,
  cloudPrint,
  shopDeviceList,
  deviceDelete,
  cloudConfigList,
  cloudConfigAdd,
} from "../../../api/shop";
export default {
  name: "greetingCardPrinter",
  components: {},
  data() {
    return {
      list: [
        {
          name: "开启贺卡打印",
          value: 1,
          field: "openAutoorder",
          tips: "开启后订单一键打印贺卡，暂不支持自动打印",
        },
      ],
      form: {
        name: "",
        deviceSn: "lk10gy13861829",
        deviceSecret: "2Vy7D5sDDjUI2DZs",
        shopIdList: [0],
        deviceName: "",
        deviceType: 28,
        shopId: 0,
      },
      cloudList: [],
      configList: [],
      params: {
        cardWidth: 210,
        cardHeight: 297,
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 10,
        paddingRight: 10,
        direction: 1, // 1：竖向 2：横向
        fontFamily: "FangZhengKaiTi",
        shopIdList: [0],
        sizeType: 9, // 纸张尺寸
        textAlign: 5,
      },
      printerList: [],
      shopList: [],
      fonts: [
        {
          name: "方正楷体",
          value: "FangZhengKaiTi",
        },
        {
          name: "沐瑶随心手写体",
          value: "YaoSuiXinShouXieTi",
        },
        {
          name: "钟奇志莽行书",
          value: "ZhongQiZhiXingShu",
        },
        {
          name: "鸿雷板书简体",
          value: "HongLeiBanShu",
        },
        {
          name: "卡通体",
          value: "KaTongTi",
        },
        {
          name: "品如手写体",
          value: "PinRu",
        },
        {
          name: "千图笔锋手写体",
          value: "QianTuBiFengShouXieTi",
        },
        {
          name: "悠然小楷",
          value: "slideyouran",
        },
      ],
      paperSize: [
        {
          name: "A4",
          value: 9,
        },
        {
          name: "A5",
          value: 11,
        },
        {
          name: "自定义",
          value: 0,
        },
      ],
      directonList: [
        {
          name: "竖向",
          value: 1,
        },
        {
          name: "横向",
          value: 2,
        },
      ],
      textAlignList: [
        {
          name: "左上",
          value: 1,
        },
        {
          name: "左中",
          value: 2,
        },
        {
          name: "左下",
          value: 3,
        },
        {
          name: "中上",
          value: 4,
        },
        {
          name: "中",
          value: 5,
        },
        {
          name: "中下",
          value: 6,
        },
        {
          name: "右上",
          value: 7,
        },
        {
          name: "右中",
          value: 8,
        },
        {
          name: "右下",
          value: 9,
        },
      ],
      dialogVisible: false,
    };
  },
  // 监听属性 类似于data概念
  computed: {
    cardHtml() {
      return `<style type="text/css">
                @font-face {
                  font-family: ${this.params.fontFamily};
                  src: url('https://h5.liebaoai.cn/font/${
                    this.params.fontFamily
                  }.woff2');
                  font-weight: normal;
                  font-style: normal;
                }
                .card-left {
                  position: relative;
                  height: ${this.params.cardHeight}mm;
                  width: ${this.params.cardWidth}mm;
                  display:flex;
                  ${this.contentStyle(this.params.direction)[0]}
                }
                .card-con {
                  margin-top: ${this.params.paddingTop}mm;
                  margin-right: ${this.params.paddingRight}mm;
                  margin-bottom: ${this.params.paddingBottom}mm;
                  margin-left: ${this.params.paddingLeft}mm;
                  font-size:35px;
                  font-family: ${this.params.fontFamily};
                  ${this.contentStyle(this.params.direction)[1]}
                }
              </style>
              <div class="card-left">
                <div class="card-con">亲爱的，生日快乐！</div>
              </div>`;
    },
  },
  // 监控data中的数据变化
  watch: {
    "params.shopIdList": {
      handler(newVal, oldVal) {
        console.log("newVal,oldVal:", newVal, oldVal);
        if (newVal[0] !== oldVal[0]) {
          let data = this.configList.find((v) => {
            return v.shopId === newVal[0];
          });
          if (!data) {
            data = this.configList[0];
          }
          data.shopIdList = newVal;
          this.params = data;
        }
      },
      deep: true,
    },
  },
  // 方法集合
  methods: {
    saveCard() {
      cloudConfigAdd(this.params).then((res) => {
        console.log("添加贺卡配置信息", res);
        if (res.code === 200) {
          this.$message.success(`保存贺卡成功！`);
          this.getCloudConfigList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    printTest() {
      let html = this.cardHtml;
      if (this.params.direction === 2) {
        html = `<style type="text/css">
                @font-face {
                  font-family: ${this.params.fontFamily};
                  src: url('https://h5.liebaoai.cn/font/${
                    this.params.fontFamily
                  }.woff2');
                  font-weight: normal;
                  font-style: normal;
                }
                .card-left {
                  position: relative;
                  height: ${this.params.cardWidth}mm;
                  width: ${this.params.cardHeight}mm;
                  display:flex;
                  ${this.contentStyle(1)[0]}
                }
                .card-con {
                  margin-top: ${this.params.paddingTop}mm;
                  margin-right: ${this.params.paddingRight}mm;
                  margin-bottom: ${this.params.paddingBottom}mm;
                  margin-left: ${this.params.paddingLeft}mm;
                  font-size:35px;
                  font-family: ${this.params.fontFamily};
                  ${this.contentStyle(1)[1]}
                }
              </style>
              <div class="card-left">
                <div class="card-con">亲爱的，生日快乐！</div>
              </div>`;
      }
      let params = {
        orderId: 0,
        shopId: this.params.shopIdList[0],
        jobFile: html,
      };
      cloudPrint(params).then((res) => {
        console.log("云盒打印信息", res);
        if (res.code === 200) {
          this.$message({
            type: "success",
            message: `成功发送云盒打印任务！`,
          });
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    cloudPrinterManager() {
      if (!this.form.name) {
        return this.$message.warning(`请输入云盒名称！`);
      }
      if (!this.form.deviceSn) {
        return this.$message.warning(`请输入云盒序列号！`);
      }
      if (!this.form.deviceSecret) {
        return this.$message.warning(`请输入云盒秘钥！`);
      }
      let form = this.$tool.deepClone(this.form);
      form.shopIds = form.shopIdList.join();
      deviceAdd(form).then((res) => {
        console.log("添加云盒信息", res);
        if (res.code === 200) {
          this.$message.success(`成功添加云盒！`);
          this.dialogVisible = false;
          this.getCloudPrinterList();
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getCloudPrinterInfo() {
      let params = {
        deviceId: this.form.deviceSn,
        deviceKey: this.form.deviceSecret,
        printerType: 1,
      };
      getCloudDevice(params).then((res) => {
        console.log("云盒信息", res);
        if (!res.code) {
          this.cloudList = res.data;
          let cloud = this.cloudList[0];
          if (!cloud) return;
          this.form.deviceName = `${cloud.printerName}(USB${cloud.port})`;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    addPrinter(v) {
      this.dialogVisible = true;
      if (v) this.form = v;
      if (this.form.id) return;
      this.form.name = `贺卡打印云盒${new Date().getTime()}`;
    },
    changeShop(e) {
      if (e.at(-1)) {
        this.params.shopIdList = e.filter((v) => {
          return v;
        });
      } else {
        this.params.shopIdList = [0];
      }
    },
    changePrinterShop(e) {
      if (e.at(-1)) {
        this.form.shopIdList = e.filter((v) => {
          return v;
        });
      } else {
        this.form.shopIdList = [0];
      }
    },
    changeDmPaperSize(e) {
      if (e === 9) {
        this.params.cardWidth = 210;
        this.params.cardHeight = 297;
      }
      if (e === 11) {
        this.params.cardWidth = 148;
        this.params.cardHeight = 210;
      }
      if (e === 0) {
        this.params.cardWidth = 195;
        this.params.cardHeight = 145;
      }
    },
    deletePrinter(v) {
      this.$confirm("此操作将删除打印云盒, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          deviceDelete({ id: v.id }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: "success",
                message: "删除成功！",
              });
              this.getCloudPrinterList();
            } else {
              this.$message({
                type: "error",
                message: res.msg,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    getNewShopList() {
      getNewShopList().then((res) => {
        if (res.code === 200) {
          res.data.unshift({ id: 0, name: "全部门店" });
          this.shopList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getCloudPrinterList() {
      shopDeviceList({ deviceType: 28 }).then((res) => {
        if (res.code === 200) {
          this.printerList = res.data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    getCloudConfigList() {
      cloudConfigList({ deviceType: 28 }).then((res) => {
        if (res.code === 200) {
          this.configList = res.data;
          let data = res.data.find((v) => {
            return v.shopId === this.params.shopIdList[0];
          });
          data.shopIdList = [data.shopId];
          this.params = data;
        } else {
          this.$message({
            type: "error",
            message: res.msg,
          });
        }
      });
    },
    contentStyle(direction) {
      let style = ``;
      let transform = ``;
      if (direction === 1) {
        switch (this.params.textAlign) {
          case 1:
            style = `justify-content:flex-start;align-items:flex-start;`;
            break;
          case 2:
            style = `justify-content:flex-start;align-items:center;`;
            break;
          case 3:
            style = `justify-content:flex-start;align-items:flex-end;`;
            break;
          case 4:
            style = `justify-content:center;align-items:flex-start;`;
            break;
          case 5:
            style = `justify-content:center;align-items:center;`;
            break;
          case 6:
            style = `justify-content:center;align-items:flex-end;`;
            break;
          case 7:
            style = `justify-content:flex-end;align-items:flex-start;`;
            break;
          case 8:
            style = `justify-content:flex-end;align-items:center;`;
            break;
          case 9:
            style = `justify-content:flex-end;align-items:flex-end;`;
            break;
          default:
            break;
        }
      } else {
        switch (this.params.textAlign) {
          case 1:
            style = `justify-content:flex-end;align-items:flex-start;`;
            transform = `transform: translateX(100%) rotate(90deg);transform-origin: left top;`;
            break;
          case 2:
            style = `justify-content:center;align-items:flex-start;`;
            transform = `transform: translateX(50%) translateY(-50%) rotate(90deg);transform-origin: left;`;
            break;
          case 3:
            style = `justify-content:flex-start;align-items:flex-start;`;
            transform = `transform: translateY(-100%) rotate(90deg);transform-origin: left bottom;`;
            break;
          case 4:
            style = `justify-content:flex-end;align-items:center;`;
            transform = `transform: translateX(50%) rotate(90deg);transform-origin: center top;`;
            break;
          case 5:
            style = `justify-content:center;align-items:center;`;
            transform = `transform: rotate(90deg);`;
            break;
          case 6:
            style = `justify-content:flex-start;align-items:center;`;
            transform = `transform: translateX(-50%) rotate(90deg);`;
            break;
          case 7:
            style = `justify-content:flex-end;align-items:flex-end;`;
            transform = `transform: translatey(100%) rotate(90deg);transform-origin: right top;`;
            break;
          case 8:
            style = `justify-content:center;align-items:flex-end;`;
            transform = `transform: translateX(-50%) translateY(50%) rotate(90deg);transform-origin:right;`;
            break;
          case 9:
            style = `justify-content:flex-start;align-items:flex-end;`;
            transform = `transform: translateX(-100%) rotate(90deg);transform-origin:right bottom;`;
            break;
          default:
            break;
        }
      }

      return [style, transform];
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getNewShopList();
    this.getCloudPrinterList();
    this.getCloudConfigList();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 创建之前
  beforeCreate() {},
  // 生命周期 - 挂载之前
  beforeMount() {},
  // 生命周期 - 更新之前
  beforeUpdate() {},
  // 生命周期 - 更新之后
  updated() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
};
</script>

<style lang="scss" scoped  type="text/css">
.model {
  .title {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    line-height: 22px;
    color: #333333;
    padding-left: 10px;
    margin-top: 24px;
  }
  .title::before {
    width: 3px;
    height: 16px;
    background: rgba(252, 114, 0, 0.39);
    border-radius: 2px;
    content: "";
    position: absolute;
    top: 2px;
    left: 0;
  }
  /deep/ .el-button--default:hover {
    background-color: rgba(252, 114, 0, 0.2);
    border-color: rgba(252, 114, 0, 0.2);
    color: #fc7200;
  }
  /deep/ .el-button--primary {
    background-color: #fc7200;
    border-color: #fc7200;
  }
  .setting-model {
    .title {
      position: relative;
      font-size: 16px;
      font-weight: bold;
      line-height: 22px;
      color: #333333;
      padding-left: 10px;
      margin-top: 24px;
      .tips {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #999999;
      }
    }
    .title::before {
      width: 3px;
      height: 16px;
      background: #fc7200;
      border-radius: 2px;
      content: "";
      position: absolute;
      top: 2px;
      left: 0;
    }
    .list {
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #ffffff;
        margin-top: 10px;
        padding: 16px 20px;
        .left {
          display: flex;
          flex-direction: column;
          font-size: 14px;
          font-weight: bold;
          line-height: 20px;
          color: #000000;
          .left-top {
            display: flex;
            align-items: center;
            .set {
              font-weight: 400;
              color: #fc7200;
              margin-left: 10px;
              cursor: pointer;
            }
          }
          .left-bot {
            margin-top: 2px;
            font-size: 12px;
            font-weight: 400;
            line-height: 17px;
            color: #999999;
          }
        }
        .right {
          display: flex;
          align-items: center;
          .time {
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            line-height: 17px;
            color: #333333;
            margin-right: 20px;
          }
          .time1 {
            color: #999999;
          }
          .con {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #fc7200;
            padding-left: 20px;
            cursor: pointer;
          }
          .con1 {
            color: #999999;
          }
        }
      }
      .card-setting {
        display: flex;
        margin-top: 10px;
        .card-title {
          display: flex;
          align-items: center;
          font-weight: bold;
          font-size: 14px;
          margin: 10px 0;
          .card-tip {
            font-size: 12px;
            color: #fc7200;
          }
        }

        .card-right {
          width: 230px;
          flex-shrink: 0;
          .setting-params {
            width: 217px;
          }
          .btns {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
          }
        }
        .card-left {
          position: relative;
          margin-right: 24px;
          background-color: #fbfbfb;
          flex-shrink: 0;
          flex: 1;
          // height: 297mm;
          // width: 210mm;
          .card-con {
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            text-align: center;
          }
          /deep/ .el-icon-arrow-down {
            position: absolute;
            font-size: 30px;
          }
          .icon1 {
            top: 10mm;
            left: 10mm;
            transform: rotate(-45deg);
          }
          .icon2 {
            top: 10mm;
            right: 10mm;
            transform: rotate(45deg);
          }
          .icon3 {
            bottom: 10mm;
            left: 10mm;
            transform: rotate(-135deg);
          }
          .icon4 {
            bottom: 10mm;
            right: 10mm;
            transform: rotate(135deg);
          }
        }
      }
    }
  }
  .printer-list {
    display: flex;
    flex-wrap: wrap;

    .item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 320px;
      height: 182px;
      background: #ffffff;
      border-radius: 8px;
      margin: 10px 20px 0 0;
      cursor: pointer;
      .img {
        width: 80px;
        height: 80px;
      }
      .name {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #333333;
      }
      .shop-name {
        font-size: 12px;
        font-weight: 400;
        line-height: 20px;
        color: #999999;
      }
      .btns {
        position: absolute;
        top: 10px;
        right: 0;
        img {
          width: 20px;
          height: 20px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>