diagnosis.admin/src/views/diagnosis/components/submitRecipe.vue

<template>
  <div class="recipe">
    <Popup
      @cancle="closePopup"
      width="60%"
      title="处置方案"
      :showDialog.sync="show"
      distanceTop="3vh"
      :showBtns="false"
      :showBody="false"
    >
      <div slot="body">
        <div class="recipe-priview flex flex-col-top">
          <div class="left-table">
            <!-- 用户信息 -->
            <div class="message" v-if="msg">
              <div class="msg-title">
                <img src="../../../assets/new-icon/people.png" alt />
                <span>患者信息</span>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>姓名：</span>
                  <span>{{ msg.patient.name }}</span>
                </div>
                <div class="row-item">
                  <span>性别：</span>
                  <span>{{ msg.patient.sex }}</span>
                </div>
                <div class="row-item">
                  <span>年龄：</span>
                  <span>{{msg.patient.age}}岁</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>身份证：</span>
                  <span>{{ msg.patient.idcard}}</span>
                </div>
                <div class="row-item">
                  <span>电话：</span>
                  <span>{{ msg.patient.phone }}</span>
                </div>
              </div>
              <!-- <div class="ms-row">
                <div class="row-item">
                  <span>地址：</span>
                  <span>{{ msg.patient.province}}{{ msg.patient.city}}{{msg.patient.district}}{{ msg.patient.detailadress }}</span>
                </div>
              </div>-->
              <div class="ms-row" v-if="recipes.length>0">
                <div class="row-item" style="font-weight:bold;" v-if=" recipes[0].recipeType==1">
                  <span>是否代煎：</span>
                  <span>{{ isDj?'是':'否'}}</span>
                </div>
                <div class="row-item">
                  <span>是否快递：</span>
                  <span>{{ isPs?'是':'否' }}</span>
                </div>
              </div>
              <!-- v-if="recipes.length>0 && isPs" -->
              <template v-if="false">
                <div class="ms-row">
                  <div class="row-item">
                    <span>收货人：</span>
                    <span>{{ psMsg.name || ''}}</span>
                  </div>
                  <div class="row-item">
                    <span>收货电话：</span>
                    <span>{{ psMsg.phone || ''}}</span>
                  </div>
                </div>
                <div class="ms-row">
                  <div class="row-item" style="font-weight:bold;">
                    <span>收货地址：</span>
                    <span>{{ psMsg.address || ''}}</span>
                  </div>
                </div>
              </template>

              <div class="msg-title" style="margin-top: 20px;">
                <img src="../../../assets/new-icon/book.png" alt />
                <span>就诊信息</span>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>就诊日期：</span>
                  <span>{{ msg.outpatientRecords.recordstime }}</span>
                </div>
                <div class="row-item">
                  <span>就诊科室：</span>
                  <span>{{ msg.outpatientRecords.departmentName}}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>中医诊断：</span>
                  <span>{{ msg.mainDiagnosis.namemedicine}}</span>
                </div>
                <div class="row-item">
                  <span>治法：</span>
                  <span>{{ msg.mainDiagnosis.treatment }}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>其他诊断：</span>
                  <div>
                    <div
                      v-for="(item,index) in msg.secondDiagnosis
"
                      :key="index"
                    >{{ item.namemedicine?'中医诊断':'西医诊断' }}:{{ item.namemedicine || item.diagnosis}}</div>
                  </div>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>主诉：</span>
                  <span>{{ msg.electronicmedicalrecord.chiefcomplaint }}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>现病史：</span>
                  <span>{{ msg.electronicmedicalrecord.historypresent }}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>既往史：</span>
                  <span>{{ msg.electronicmedicalrecord.pasthistory }}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>中医四诊：</span>
                  <span>{{ msg.electronicmedicalrecord. fourmedicine}}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>体格检查：</span>
                  <span>{{ msg.electronicmedicalrecord.physicalexamination }}</span>
                </div>
              </div>
              <div class="ms-row">
                <div class="row-item">
                  <span>辅助检查：</span>
                  <span>{{ msg.electronicmedicalrecord.supplementaryexamination }}</span>
                </div>
              </div>
              <div class="ms-row" v-if="msg.electronicmedicalrecord.image1.length">
                <div class="row-item">
                  <span>报告照片：</span>
                  <div class="img-body">
                    <el-image
                      class="img-item"
                      :preview-src-list="msg.electronicmedicalrecord.image1"
                      :src="item1"
                      alt
                      v-for="(item1,index1) in msg.electronicmedicalrecord.image1"
                      :key="index1"
                      z-index="99999"
                    ></el-image>
                  </div>
                </div>
              </div>
            </div>
            <!-- 安全合理用药审查报告 -->
            <div class="report" v-if="false">
              <h3>安全合理用药审查报告</h3>
              <div class="patiens-msg mr-t10" v-if="rationalMed.length>0">
                <div class="p">
                  <!-- {{item.matname}}({{item.matbzjj}}) -->
                  <!-- <div class="patiens-name">{{item.matname}}</div> -->
                  <div class="patiens-cate">超剂量药品：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed10" :key="index">
                    <span v-if="item.showDose">
                      <span class="matname">{{item.matname}}</span>
                      <span style="color:red;">({{item.matmindosage}}-{{item.matmaxdosage}})</span>
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed2.length>0">
                  <div class="patiens-cate">慎忌禁用药：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed2" :key="index">
                    <span v-if="item.matsjj">
                      <span class="matname">{{item.matname}}</span>
                      ({{item.matsjj |ftsjj}})
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed3.length>0">
                  <div class="patiens-cate">孕妇慎忌禁：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed3" :key="index">
                    <span v-if="item.matyfsjj">
                      <span class="matname">{{item.matname}}</span>
                      <span :style="{color:item.matyfsj==3?'red':''}">({{item.matyfsjj |fyfsjj}})</span>
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed4.length>0">
                  <div class="patiens-cate">服药饮食禁忌：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed4" :key="index">
                    <span v-if="item.matysjj">
                      <span class="matname">{{item.matname}}</span>
                      ({{item.matysjj?item.matysjj:'无'}})
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed5.length>0">
                  <div class="patiens-cate">药物毒性说明：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed5" :key="index">
                    <span v-if="item.matdxsm">
                      <span class="matname" style="color:red;">{{item.matname}}</span>
                      ({{item.matdxsm?item.matdxsm:'无'}})
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed6.length>0">
                  <div class="patiens-cate">病证用药禁忌：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed6" :key="index">
                    <span v-if="item.matbzjj">
                      <span class="matname">{{item.matname}}</span>
                      ({{item.matbzjj?item.matbzjj:'无'}})
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed7.length>0">
                  <div class="patiens-cate">十八反：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed7" :key="index">
                    <!-- <span v-if='item.matsbf'>{{fsbf(item.matsbf,item.matname)}}</span> -->
                    <span v-if="item.matsbf">
                      <span style="color:red;">{{item.matname}}</span>
                      反{{item.matsbf}}
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed8.length>0">
                  <div class="patiens-cate">十九畏：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed8" :key="index">
                    <!-- <span v-if="item.matsjw">{{fsjw(item.matsjw,item.matname)}}</span> -->
                    <span v-if="item.matsjw">
                      <span style="color:red;">{{item.matname}}</span>
                      畏{{item.matsjw}}
                    </span>
                  </div>
                </div>

                <div class="p" v-if="rationalMed9.length>0">
                  <div class="patiens-cate">用药不宜：</div>
                  <div class="patiens-desc" v-for="(item,index) in rationalMed9" :key="index">
                    <span v-if="item.matby">{{fmatby(item.matby,item.matname) }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- <div style="text-align:center;margin-top:10px;" v-if="recipeItem.showSign">
                            <el-button size="small" type="primary" @click="signToRecipt">双签名</el-button>
            </div>-->
          </div>
          <!-- 右侧处方笺 -->
          <div class="right-pad">
            <!-- 处方标题 -->
            <div class="message">
              <div class="ms-row" style="margin-top: 0;">
                <div class="row-item msg-title">
                  <img src="../../../assets/new-icon/book.png" alt />
                  <span>处方信息</span>
                </div>
                <div class="row-item" style="justify-content: flex-end;">
                  <span>合计金额：{{totalCount || 0}}元</span>
                </div>
              </div>
            </div>
            <!-- 处方tab -->
            <div class="recipe-tabs">
              <div
                :class="['tabs-item',recipeItem.pid==item.pid?'tabs-active':'']"
                v-for="(item,index) in recipes"
                :key="index"
                @click="leftChange(item)"
              >
                <span v-if="item.recipeType==1">中药处方{{index+1}}</span>
                <span v-if="item.recipeType==2">中药制剂处方</span>
                <span v-if="item.recipeType==3">适宜技术处方</span>
                <img src="~@/assets/new-icon/close.png" alt @click.self="deleteItem(index)" />
              </div>
            </div>
            <!-- 中药处方 -->
            <div v-if="recipeItem.recipeType==1">
              <chineseMedicinePad ref="chineseM" :recipeData="recipeItem"></chineseMedicinePad>
            </div>
            <!-- 中药制剂 -->
            <div v-if="recipeItem.recipeType==2">
              <chineseMadePad :recipeData="recipeItem"></chineseMadePad>
            </div>
            <!-- 适宜技术处方 -->
            <div v-if="recipeItem.recipeType==3">
              <suitMadePad :recipeData="recipeItem"></suitMadePad>
            </div>
          </div>
        </div>
        <div class="flex-center btns">
          <el-button size="small" @click="closePopup">取消</el-button>
          <el-button size="small" type="primary" @click="sureToSubmit">确认并提交</el-button>
        </div>
      </div>
    </Popup>
  </div>
</template>

<script>
import { addRecipe, updateRecipe } from "@/api/diagnosis.js";
import { mapGetters } from "vuex";
import Popup from "@/components/Propup.vue";
import chineseMedicinePad from "@/components/ui/chineseMedicinePad.vue";
import chineseMadePad from "@/components/ui/chineseMadePad.vue";
import suitMadePad from "@/components/ui/suitMadePad.vue";

import { formatPicture } from "@/utils/picture";

export default {
  components: {
    Popup,
    chineseMedicinePad,
    chineseMadePad,
    suitMadePad
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    priviewData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      showDialog: false,
      recipes: [], // 处方数据
      recipeItem: {}, // 右侧显示处方
      msg: null, // 用户信息
      // isDj: false, // 是否代煎
      // isPs: false, // 是否配送
      psMsg: {}, // 配送相关信息
      rationalMed: [],
      rationalMed1: [],
      rationalMed2: [],
      rationalMed3: [],
      rationalMed4: [],
      rationalMed5: [],
      rationalMed6: [],
      rationalMed7: [],
      rationalMed8: [],
      rationalMed9: [],
      rationalMed10: []
    };
  },
  watch: {
    show() {
      this.showDialog = this.show;
      if (!this.showDialog) {
        this.recipes = [];
        this.recipeItem = {};
      }
    },
    priviewData: {
      deep: false,
      handler: function() {
        if (!this.show) return;
        if (Object.keys(this.priviewData).length == 0) return;
        this.recipes = [];
        this.recipeItem = {};
        this.dealPriviewData();
      }
    }
  },
  computed: {
    totalCount() {
      let total = 0;
      this.recipes.forEach(item => {
        total += item.lumpSum;
      });
      return total.toFixed(2);
    },
    isDj() {
      let isDj = false;
      let item = this.recipeItem;
      if (item.recipeType == 1 && item.fried == "代煎") {
        isDj = true;
      }
      if (item.recipeType == 1 && item.fried == "") {
        isDj = false;
      }

      return isDj;
    },
    isPs() {
      let isPs = false;
      let item = this.recipeItem;
      if (item.isdelivery == 0 && item.recipeType != 3) {
        isPs = true;
        // this.psMsg = {
        //   name: item.name,
        //   phone: item.phone,
        //   address: item.address
        // };
      }

      return isPs;
    },
    ...mapGetters(["getPatiensInfo", "getuserinfo", "getDrugInfo", "getIsSee", "getPreNo"])
  },
  created() {
    this.showDialog = this.show;
    this.dealPriviewData();
  },
  methods: {
    getEditPreNo() {
      return this.$route.query && this.$route.query.recipeType === "edit" ? this.$route.query.recipeID : this.getPreNo;
    },
    signToRecipt() {
      this.recipes.forEach(item => {
        if (item.pid == this.recipeItem.pid) {
          item.showSign = false;
          // this.recipeItem = item
          this.$set(this.recipeItem, "showSign", false);
        }
      });
      this.$forceUpdate();
      this.$refs.chineseM.showSign = true;
    },
    closePopup() {
      this.showDialog = !this.showDialog;
      // this.priviewData = {}
      this.recipes = []; // 处方数据
      this.recipeItem = {}; // 右侧显示处方
      this.$emit("update:show", this.showDialog);
      this.$emit("cancle", 1);
    },
    // 处理数据
    dealPriviewData() {
      // this.isPs = false;
      // this.isDj = false;
      // 中药处方
      if (this.priviewData.tcmPrescriptionFormVos.length > 0) {
        this.priviewData.tcmPrescriptionFormVos.forEach((item, index) => {
          item.showSign = true;
          item.recipeType = 1;
          this.recipes.push(item);

          if (index == 0) {
            this.getSvaeMed(item);
          }
        });
      }
      // 中药制剂
      if (this.priviewData.zhongyaozhijiFormVo) {
        if (this.priviewData.zhongyaozhijiFormVo.pid) {
          this.priviewData.zhongyaozhijiFormVo.recipeType = 2;
          this.recipes.push(this.priviewData.zhongyaozhijiFormVo);
        }
      }

      // 适宜技术处方
      if (this.priviewData.shiyijishuFormVo) {
        if (this.priviewData.shiyijishuFormVo.pid) {
          this.priviewData.shiyijishuFormVo.recipeType = 3;
          this.recipes.push(this.priviewData.shiyijishuFormVo);
        }
      }

      this.recipeItem = this.recipes[0];
      // this.recipes.forEach(item => {
      //   if (item.recipeType == 1 && item.fried == "代煎") {
      //     this.isDj = true;
      //   }
      //   if (item.recipeType == 1 && item.fried == "") {
      //     this.isDj = false;
      //   }
      //   if (item.isdelivery == 0 && item.recipeType != 3) {
      //     this.isPs = true;
      //     this.psMsg = {
      //       name: item.name,
      //       phone: item.phone,
      //       address: item.address
      //     };
      //   }
      // });
      if (this.priviewData.prescriptionVo) {
        this.msg = this.priviewData.prescriptionVo;
        this.msg.electronicmedicalrecord.image1 = formatPicture(this.msg.electronicmedicalrecord.image1);
      }
    },
    // 删除处方
    deleteItem(index) {
      this.$confirm("此操作将删除当前处方, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (index == 0 && this.recipes.length == 1) {
            this.deleteRawData(this.recipes[index].recipeType, index);
            this.recipes.splice(index, 1);
            this.closePopup();
            return;
          }
          if (this.recipes[index].pid == this.recipeItem.pid) {
            this.deleteRawData(this.recipes[index].recipeType, index);
            this.recipes.splice(index, 1);
            this.recipeItem = this.recipes[0];
          } else {
            this.deleteRawData(this.recipes[index].recipeType, index);
            this.recipes.splice(index, 1);
          }
        })
        .catch(() => {});
    },
    // 左侧切换处方
    leftChange(item) {
      this.recipeItem = item;

      this.$refs.chineseM.showSign = !item.showSign;

      this.getSvaeMed(item);
    },

    // 获取安全合理用药信息
    getSvaeMed(data) {
      let father = this.$parent;
      data.prescriptiondetails.forEach(item1 => {
        if (item1.drugid.indexOf("-") != -1) {
          father.getRationalMed(item1.drugid);
        } else {
          father.getRationalMedForPlat(item1.drugid);
        }
      });

      setTimeout(() => {
        this.rationalMed = this.$parent.rationalMed;
        this.rationalMed1 = this.$parent.rationalMed1;
        this.rationalMed2 = this.$parent.rationalMed2;
        this.rationalMed3 = this.$parent.rationalMed3;
        this.rationalMed4 = this.$parent.rationalMed4;
        this.rationalMed5 = this.$parent.rationalMed5;
        this.rationalMed6 = this.$parent.rationalMed6;
        this.rationalMed7 = this.$parent.rationalMed7;
        this.rationalMed8 = this.$parent.rationalMed8;
        this.rationalMed9 = this.$parent.rationalMed9;
        this.rationalMed10 = this.$parent.rationalMed10;
      }, 200);
    },

    // 同时删除 缓存内保存的 提交数据
    deleteRawData(type, index) {
      let data = JSON.parse(sessionStorage.getItem("priviewRawData"));
      let zhongyao = data.zhongyao;
      let zhongchengyao = data.zhongchengyao;
      let technology = data.technology;
      if (type == 1) {
        zhongyao.splice(index, 1);
      }

      if (type == 2) {
        zhongchengyao = {};
      }

      if (type == 3) {
        technology = {};
      }

      sessionStorage.setItem(
        "priviewRawData",
        JSON.stringify({
          zhongchengyao,
          technology,
          zhongyao
        })
      );
    },
    sureToSubmit() {
      let data = JSON.parse(sessionStorage.getItem("priviewRawData"));
      let zhongyao = data.zhongyao;
      let zhongchengyao = data.zhongchengyao;
      let technology = data.technology;

      if (!!this.getEditPreNo()) {
        this.updateRecipe(zhongyao, zhongchengyao, technology);
      } else {
        this.addRecipe(zhongyao, zhongchengyao, technology);
      }
    },
    // 提交处方
    async addRecipe(zhongyao, zhongchengyao, technology) {
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let params = {
        recordid: this.getPatiensInfo.pid,
        technology: technology,
        zhongchengyao: zhongchengyao,
        zhongyao: zhongyao
      };

      let res = await addRecipe(params).catch(err => void 0);
      loading.close();
      if (res && res.ResultCode == 0) {
        this.$message.success("提交成功");
        let msg = {
          origin: "Recipe",
          msg: "刷新数据"
        };
        window.parent.postMessage(JSON.stringify(msg), "*");
        if (this.$route.query.from && this.$route.query.from == "validation") {
          setTimeout(() => {
            loading.close();
            this.$router.back();
          }, 3000);
        } else {
          setTimeout(() => {
            loading.close();
            this.$router.push({
              path: "/index/recipe"
            });
          }, 3000);
        }
        sessionStorage.setItem("priviewRawData", "");
        sessionStorage.removeItem("prescr" + this.getPatiensInfo.pid);
      }
    },
    // 审核不通过 修改处方
    async updateRecipe(zhongyao, zhongchengyao, technology) {
      const loading = this.$loading({
        lock: true,
        text: "正在修改",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      const recipeID = this.getEditPreNo();
      zhongyao.forEach(item => {
        item.preId = recipeID;
      });
      zhongchengyao.preId = recipeID;
      technology.preId = recipeID;
      let params = {
        recordid: this.$route.query.recordsId || this.getPatiensInfo.pid,
        technology: technology,
        zhongchengyao: zhongchengyao,
        zhongyao: zhongyao
      };
      let res = await updateRecipe(params).catch(err => void 0);
      loading.close();
      if (res && res.ResultCode == 0) {
        let msg = {
          origin: "Recipe",
          msg: "刷新数据"
        };
        window.parent.postMessage(JSON.stringify(msg), "*");
        this.$message.success("修改成功");
        setTimeout(() => {
          loading.close();
          this.$router.push({
            path: "/index/recipe"
          });
        }, 3000);

        sessionStorage.setItem("priviewRawData", "");
      }
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/style/common.scss";

.recipe-priview {
  // height: 400px;
  height: 70vh;

  .right-pad {
    width: 420px;
    // background: red;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .report {
    margin-top: 40px;
    height: 400px;
    overflow: auto;
    background: rgba($color: #d7d7d7, $alpha: 0.3);
    padding: 10px;
    box-sizing: border-box;

    h3 {
      text-align: center;
    }
  }

  .left-table {
    flex: 1;
    // height: 100%;
    overflow: auto;
    margin-right: 10px;

    .table-body {
      border: 1px solid #d7d7d7;
      border-bottom: 0;
    }

    .table-title {
      font-size: 15px;
      font-weight: 600;
      text-align: center;
      padding: 8px;
      color: #fff;
      background: #5386f6;
    }

    .table-tr {
      border-bottom: 1px solid #d7d7d7;
      cursor: default;
      // line-height: 30px;;
      font-size: 14px;
      height: 33px;

      div:nth-child(1) {
        flex: 1;
        border-right: 1px solid #d7d7d7;
      }

      div:nth-child(2) {
        flex: 1;
        border-right: 1px solid #d7d7d7;
        color: red;
      }

      div:nth-child(3) {
        width: 30px;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 60%;
        }
      }
    }

    .table-tr:last-child {
      div:nth-child(1) {
        font-weight: 600;
      }
    }

    .table-tr-active {
      background: #d7d7d7;
    }
  }

  .message {
    .msg-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      img {
        width: 24px;
        margin-right: 5px;
      }

      span {
        font-size: 14px;
        font-weight: 600;
      }
    }

    .ms-row {
      margin-top: 10px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
    }

    .row-item {
      display: flex;
      flex: 1;
      align-items: flex-start;
    }

    .img-body {
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .img-item {
      width: 80px;
      height: 80px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}

.btns {
  margin-top: 10px;
}

.patiens-msg {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;

  .p {
    margin-bottom: 5px;
    cursor: default;

    .patiens-name {
      color: #5386f6;
      font-weight: bold;
      font-size: 16px;
    }

    .patiens-desc {
      display: inline-block;

      .matname {
        color: #5386f6;
      }
    }

    .patiens-cate {
      font-weight: bold;
    }
  }
}

.recipe-tabs {
  width: 100%;
  overflow-x: auto;
  display: flex;
  align-items: flex-start;
  margin-top: 10px;
  .tabs-item {
    cursor: pointer;
    min-width: 105px;
    padding: 2px 5px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #000;
    border-right: 0;

    img {
      width: 15px;
      margin-left: 5px;
    }
  }

  .tabs-active {
    background: #d7d7d7;
  }

  .tabs-item:last-child {
    border-right: 1px solid #000;
  }
}
</style>