qx
2025-04-10 0d22dac3090ad057a5470610a321c936cdf0d535
src/views/system/package/index.vue
@@ -9,8 +9,7 @@
      </el-form-item>
      <el-form-item label="体检类别" prop="tjCategory">
        <el-select v-model="queryParams.tjCategory" placeholder="请选择状态" style="width: 200px" filterable clearable>
          <el-option v-for="dict in dict.type.dict_tjtype" :key="dict.id" :label="dict.label"
            :value="dict.value"></el-option>
          <el-option v-for="dict in dict.type.dict_tjtype" :key="dict.id" :label="dict.label" :value="dict.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
@@ -21,34 +20,25 @@
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['system:package:add']">新增</el-button>
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:package:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUp"
          v-hasPermi="['system:package:edit']">修改</el-button>
        <el-button type="primary" icon="el-icon-edit" size="mini" :disabled="single" @click="handleUp" v-hasPermi="['system:package:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['system:package:remove']">删除</el-button>
        <el-button type="primary" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['system:package:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport"
          v-hasPermi="['system:package:export']">导出</el-button>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['system:package:export']">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <!--
    element-loading-background="rgba(0, 0, 0, 0.1)"
    element-loading-spinner="el-icon-loading"
        element-loading-text="正在加载中..." -->
    <template>
      <el-table v-loading="loading" style="width: 100%" :data="packageList" @selection-change="handleSelectionChange"
        border>
      <el-table v-loading="loading" style="width: 100%" :data="packageList" @selection-change="handleSelectionChange" border>
        <!-- 表格列保持不变 -->
        <el-table-column fixed type="selection" width="40" align="center" :show-overflow-tooltip="true" />
        <el-table-column label="序号" align="center" width="50" prop="newID" fixed />
        <!-- <el-table-column label="编号" align="center" prop="pacId" /> -->
        <el-table-column label="体检类别" width="100px" align="center" prop="categoryNames" fixed>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.dict_tjtype" :value="scope.row.tjCategory" />
@@ -57,78 +47,38 @@
        <el-table-column label="套餐名称" align="center" prop="pacName" width="150px" fixed />
        <el-table-column label="原价" width="80px" align="center" prop="price" fixed></el-table-column>
        <el-table-column label="折扣" width="80px" align="center" prop="limits" fixed></el-table-column>
        <el-table-column label="现价" width="80px" align="center" prop="newPrice" fixed>
        </el-table-column>
        <el-table-column label="单项列表" align="center" prop="allProName" width="1200px">
        </el-table-column>
        <!-- <el-table-column
          label="项目明细"
          align="center"
          prop="allSonName"
          :show-overflow-tooltip="true"
        >
        </el-table-column>-->
        <el-table-column label="现价" width="80px" align="center" prop="newPrice" fixed></el-table-column>
        <el-table-column label="单项列表" align="center" prop="allProName" width="1200px"></el-table-column>
        <el-table-column label="套餐描述" align="center" :show-overflow-tooltip="true" width="120px">
          <template slot-scope="scope">
            <div class="showInline">{{ scope.row.pacRemark }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="图片"
          align="center"
          prop="pacPhone"
          width="100"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <image-preview :src="scope.row.pacPhone" :width="50" :height="50" />
          </template>
        </el-table-column> -->
        <el-table-column label="关键字" width="110px" align="center" prop="keyNames"></el-table-column>
        <el-table-column label="是否上架" width="94px" align="center" prop="isOnSale">
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isOnSale" />
          </template>
        </el-table-column>
        <!-- <el-table-column
          label="详细介绍"
          :show-overflow-tooltip="true"
          width="100px"
          align="center"
          prop="detail"
        ></el-table-column> -->
        <el-table-column label="排序" width="50px" align="center" prop="sort"></el-table-column>
        <el-table-column label="小程序价格" width="90px" align="center" prop="retailPrice"></el-table-column>
        <!-- <el-table-column
          label="原价"
          width="90px"
          align="center"
          prop="counterPrice"
        ></el-table-column> -->
        <el-table-column label="已售数量" width="90px" align="center" prop="saleNum"></el-table-column>
        <el-table-column label="状态" align="center" prop="pacStatus" fixed="right" width="100px">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.pacStatus" active-value="0" inactive-value="1"
              @change="handleStatusChange(scope.row)"></el-switch>
            <el-switch v-model="scope.row.pacStatus" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80px" fixed="right" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
              v-hasPermi="['system:package:edit']" title="修改"></el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
              v-hasPermi="['system:package:remove']" title="删除"></el-button>
            <!-- <el-button size="mini" type="text" icon="el-icon-circle-check" @click="handleSeach(scope.row)"
              v-hasPermi="['system:package:Seach']" title="套餐详情"></el-button> -->
            <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:package:edit']" title="修改"></el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:package:remove']" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pag">
        <div class="pag1">
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
      </div>
    </template>
@@ -136,60 +86,26 @@
    <!-- 修改体检套餐对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1400px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" :inline="true">
        <!-- <div class="dialo">
        <div class="dialo1"> -->
        <!-- 表单内容保持不变 -->
        <el-form-item label="套餐名称" prop="pacName">
          <span slot="label" style="display: inline-block; border-bottom: 2px solid blue" @click="handlePackage">
            套餐名称
          </span>
          <span slot="label" style="display: inline-block; border-bottom: 2px solid blue" @click="handlePackage">套餐名称</span>
          <el-input v-model="form.pacName" placeholder="请输入套餐名称" style="width: 150px" />
        </el-form-item>
        <el-form-item label="套餐状态" prop="pacStatus">
          <!-- <el-radio-group v-model="form.pacStatus">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group> -->
          <el-select v-model="form.pacStatus" placeholder="请选择状态" style="width: 150px" filterable clearable>
            <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
            <el-option v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <!--  <el-form-item label="套餐类目" prop="categoryId">
          <el-select
            v-model="form.categoryId"
            placeholder="请选择套餐类目"
            style="width: 150px"
            @change="shangpin"
            filterable
            clearablez
          >
            <el-option
              v-for="item in categoryList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="体检类别" prop="tjCategory">
          <el-select v-model="form.tjCategory" placeholder="请选择体检类别" style="width: 150px" filterable clearable>
            <el-option v-for="dict in dict.type.dict_tjtype" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
            <el-option v-for="dict in dict.type.dict_tjtype" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否上架" prop="isOnSale">
          <!-- <el-radio-group v-model="form.pacStatus">
              <el-radio :label="0">启用</el-radio>
              <el-radio :label="1">停用</el-radio>
            </el-radio-group> -->
          <el-select v-model="form.isOnSale" placeholder="请选择是否上架" style="width: 140px" filterable clearable>
            <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label"
              :value="dict.value"></el-option>
            <el-option v-for="dict in dict.type.sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="form.sort" placeholder="请输入排序" style="width: 150px" />
        </el-form-item>
@@ -200,169 +116,79 @@
          <el-input v-model="pics" placeholder="请输入原价" style="width: 150px" />
        </el-form-item>
        <el-form-item label="折扣">
          <el-input-number style="width: 150px" v-model="youhui" :precision="2" :step="0.1" :max="10" :min="0.1"
          @change="debounceNumberChange" :debounce="3000"></el-input-number>
          <el-input-number style="width: 150px" v-model="youhui" :precision="2" :step="0.1" :max="10" :min="0.1" @change="debounceNumberChange" :debounce="3000"></el-input-number>
        </el-form-item>
        <el-form-item label="现价" prop="xianprice">
          <el-input v-model="form.xianprice" placeholder="现价" clearable style="width: 140px" @input="changeXianjia"
            @blur="numberChangeXianPrice(youhui, youhui)" type="number" :debounce="3000" min="0"/>
          <el-input v-model="form.xianprice" placeholder="现价" clearable style="width: 140px" @input="changeXianjia" @blur="numberChangeXianPrice(youhui, youhui)" type="number" :debounce="3000" min="0"/>
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-select multiple v-model="form.keywords" placeholder="请选择关键字" style="width: 160px" @change="sel" filterable
            clearable>
          <el-select multiple v-model="form.keywords" placeholder="请选择关键字" style="width: 160px" @change="sel" filterable clearable>
            <el-option v-for="item in keywordList" :key="item.id" :label="item.keyword" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <div v-if="!isCollapsed" style="display: flex">
          <div>
            <el-form-item label="套餐描述" prop="pacRemark">
              <el-input type="textarea" v-model="form.pacRemark" placeholder="请输入套餐描述" style="width: 670px"
                rows="2"></el-input>
              <el-input type="textarea" v-model="form.pacRemark" placeholder="请输入套餐描述" style="width: 670px" rows="2"></el-input>
            </el-form-item>
            <el-form-item label="详细介绍" prop="detail">
              <!-- <el-input
            v-model="form.detail"
            placeholder="请输入详细介绍"
            style="width: 200px"
          /> -->
              <editor v-model="form.detail" :min-height="192" style="width: 670px" />
            </el-form-item>
          </div>
          <!-- </div> -->
          <div class="dialo2">
            <el-form-item label="图片">
              <image-upload v-model="form.pacPhone" />
            </el-form-item>
          </div>
          <!-- </div> -->
        </div>
      </el-form>
      <el-button type="primary" plain size="mini" @click="toggleCollapse">{{
        isCollapsed ? "展开" : "收起"
      }}</el-button>
      <!-- <el-button type="primary" plain size="mini" icon="el-icon-plus" @click="addmembers()">新增单项</el-button>
      <el-table v-loading="loading" :data="form.tjProjectList" @selection-change="handleSelectionChange" border
        max-height="275" style="margin: 10px 0">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="项目名称" align="center" prop="proName" width="180px">
          <template slot-scope="scope">
            <el-select filterable v-model="scope.row.proName" placeholder="请选择项目名称" @change="getSelectValue">
              <el-option v-for="(item, index) in allList" :key="index" :label="item.proName" :value="item.proName">
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="项目明细" align="center" prop="allSonProName" width="400px" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="原价(元)" align="center" prop="proPrice" width="80px" />
        <el-table-column label="现价(元)" align="center" prop="priceNow" width="80px">
          <template slot-scope="scope">
            <el-input v-model="scope.row.priceNow" autocomplete="off" placeholder="请输入内容"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button size="mini" type="text" icon="el-icon-circle-plus-outline" @click="addmembers(scope.row)"
              v-hasPermi="['system:package:edit']" title="新增行"></el-button>
            <el-button size="mini" type="text" icon="el-icon-delete" @click.native.prevent="Delete(scope.$index)"
              v-hasPermi="['hosp:consumables:remove']" title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table> -->
      <el-button type="primary" plain size="mini" @click="toggleCollapse">{{ isCollapsed ? "展开" : "收起" }}</el-button>
      <el-row style="display: flex; width: 1300px">
        <el-col>
          <div style="text-align: center; margin-bottom: 10px; margin-top: 10px">
            项目列表
          </div>
          <el-input placeholder="输入关键字进行过滤" @input="handleFilterInput" v-model="queryParams1.nr" clearable />
          <div style="text-align: center; margin-bottom: 10px; margin-top: 10px">项目列表</div>
          <el-input placeholder="输入关键字进行过滤" v-model="filterText" @input="debounceFilter" clearable />
          <div class="tab3" style="height: 365px">
            <el-tree class="filter-tree" v-loading="loading" :data="Treedata" :props="defaultProps" show-checkbox
              node-key="proId" @check-change="handleCurrentChecked" :default-checked-keys="checkedkey"
              :filter-node-method="filterNode" ref="tree" :render-content="renderContent">
            </el-tree>
            <pagination small v-show="total1 > 0" :total="total1" :page.sync="queryParams1.page"
              :limit.sync="queryParams1.pageSize" @pagination="getDataList" />
          </div>
        </el-col>
        <!--  <el-col :span="6">
          <div
            style="text-align: center; margin-bottom: 10px; margin-top: 10px"
          >
            明细项目列表
          </div>
          <div class="tab3">
            <el-tree
              class="filter-tree"
              v-loading="loading"
              :data="TreedataList"
              node-key="proId"
              :data="filteredTreeData"
              :props="defaultProps"
              :filter-node-method="filterNode"
              show-checkbox
              @check-change="handleCurrentChecked1"
              :default-checked-keys="checkedListkey"
              ref="trees"
              node-key="proId"
              @check-change="handleCurrentChecked"
              :default-checked-keys="checkedkey"
              ref="tree"
              :render-content="renderContent"
            >
            </el-tree>
            <pagination
              small
              v-show="total1 > 0"
              :total="total1"
              :page.sync="queryParams1.page"
              :limit.sync="queryParams1.pageSize"
              @pagination="getDataList"
            />
          </div>
        </el-col> -->
        </el-col>
        <el-col>
          <div class="grid-content bg-purple">
            <div style="
                text-align: center;
                margin-bottom: 10px;
                margin-top: 10px;
                margin-left: 8%;
              ">
              已选项目列表
            </div>
            <el-table :data="DataList" border style="width: 90%; margin-left: 20px" height="400"
              :span-method="objectSpanMethod">
              <el-table-column prop="proName" label="检查项目">
              </el-table-column>
              <el-table-column prop="priceOrd" label="原价" align="center" width="80px">
              </el-table-column>
            <div style="text-align: center; margin-bottom: 10px; margin-top: 10px; margin-left: 8%;">已选项目列表</div>
            <el-table :data="DataList" border style="width: 90%; margin-left: 20px" height="400" :span-method="objectSpanMethod">
              <el-table-column prop="proName" label="检查项目"></el-table-column>
              <el-table-column prop="priceOrd" label="原价" align="center" width="80px"></el-table-column>
              <el-table-column label="折扣" width="100px">
                <template slot-scope="scope">
                  <!-- 只输入纯数字折扣 -->
                  <el-input v-model.number="scope.row.limits" @input="calculateDiscount(scope.row)" placeholder="输入折扣"
                    size="small" type="number" min="0" step="0.1" max="10">
                  </el-input>
                  <el-input v-model.number="scope.row.limits" @input="calculateDiscount(scope.row)" placeholder="输入折扣" size="small" type="number" min="0" step="0.1" max="10"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="priceNow" label="现价" width="80px" align="center">
              </el-table-column>
              <el-table-column prop="priceNow" label="现价" width="80px" align="center"></el-table-column>
              <el-table-column label="操作" align="center" width="80px">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete1(scope.row)" title="删除">
                  </el-button>
                  <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete1(scope.row)" title="删除"></el-button>
                </template>
              </el-table-column>
              <!-- <el-table-column prop="proName" label="明细项目" width="260px">
              </el-table-column> -->
              <!-- <el-table-column
                label="操作"
                align="center"
                fixed="right"
                class-name="small-padding fixed-width"
                width="50px"
              >
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDeletes(scope.row)"
                    title="删除"
                  ></el-button>
                </template>
              </el-table-column>-->
            </el-table>
            <h4 style="font-weight: 600;padding-left:20px">一共选中{{DataList.length}}项,合计:{{ form.xianprice }}元</h4>
          </div>
@@ -375,22 +201,6 @@
      </div>
    </el-dialog>
    <!-- 套餐详情 -->
    <!-- <el-dialog :title="title" :visible.sync="Seachopen" width="500px" append-to-body>
      <template>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0px; width: 60px"></div>
        <el-checkbox-group v-model="newproName" @change="handleCheckedCitiesChange">
          <el-checkbox style="margin: 15px 0px; width: 180px" v-for="item in allList" :label="item.proName"
            :key="item.proId">{{ item.proName }}</el-checkbox>
        </el-checkbox-group>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitcheckbox">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog> -->
    <Packages ref="aaa" @add="handleChanges" />
  </div>
</template>
@@ -425,7 +235,10 @@
  data() {
    return {
      pics: 0,
      filterText: "",
      filterText: '',
      filteredTreeData: [],
      debounceTimer: null,
      originalTreeData: [],
      DataList: [],
      list1: true,
      activeName: "1",
@@ -486,10 +299,15 @@
      },
      forms: {},
      youhui: 10,
      debounceTimer: null,
      rules: {},
      initializing: true, // 初始化标志
      initializing: true,
    };
  },
  watch: {
    Treedata(newVal) {
      this.originalTreeData = JSON.parse(JSON.stringify(newVal));
      this.filteredTreeData = this.originalTreeData;
    }
  },
  created() {
    this.getList();
@@ -497,11 +315,37 @@
    this.getCategory();
  },
  methods: {
    debounceFilter() {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.filterTree();
      }, 600);
    },
    filterTree() {
      if (!this.filterText) {
        this.filteredTreeData = this.originalTreeData;
        return;
      }
      const filterTextLower = this.filterText.toLowerCase();
      this.filteredTreeData = this.filterNodes(this.originalTreeData, filterTextLower);
    },
    filterNodes(nodes, filterText) {
      return nodes.filter(node => {
        const matches = node.proName.toLowerCase().includes(filterText) ||
                       (node.proEngName && node.proEngName.toLowerCase().includes(filterText));
        if (matches) return true;
        if (node.children && node.children.length) {
          node.children = this.filterNodes(node.children, filterText);
          return node.children.length > 0;
        }
        return false;
      });
    },
    debounceNumberChange(currentValue, oldValue) {
      clearTimeout(this.debounceTimer);
      this.debounceTimer = setTimeout(() => {
        this.numberChange(currentValue, oldValue);
      }, 300);
      }, 1000);
    },
    numberChange(currentValue, oldValue) {
      this.$confirm("确定修改所有子项的折扣吗?", "提示", {
@@ -547,10 +391,6 @@
    },
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.proName.indexOf(value) !== -1 || data.proEngName.indexOf(value) !== -1;
    },
    getList() {
      this.loading = true;
@@ -607,7 +447,9 @@
        counterPrice: null,
        limits: 10,
      };
      this.initializing = true;
      this.filterText = '';
      this.filteredTreeData = this.originalTreeData;
      this.initializing = true;
      this.resetForm("form");
    },
    handleQuery() {
@@ -648,6 +490,7 @@
      this.queryParams1.page = 1;
      this.checkedListkey = [];
      this.checkedNodes = [];
      this.filterText = '';
      this.getDataList();
    },
    handleStatusChange(row) {
@@ -824,23 +667,20 @@
        this.Treedata = response.data.list;
        this.total1 = response.data.total;
        this.pics = this.DataList.reduce((total, item) => total + item.priceOrd, 0);
        this.filteredTreeData = this.Treedata;
        this.originalTreeData = JSON.parse(JSON.stringify(this.Treedata));
        this.$nextTick(() => {
          this.$refs.tree.setCheckedKeys(this.checkedNodes);
          this.initializing = false;
          this.loading = false;
        });
      });
      this.loading = false;
    },
    handleFilterInput() {
      this.queryParams1.page = 1;
      this.getDataList();
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys(this.checkedNodes);
      }).catch(() => {
        this.loading = false;
      });
    },
    handleCurrentChecked(data, checked, indeterminate) {
      if (this.initializing) {
        return; // 初始化时不处理
        return;
      }
      if (checked) {
        if (!this.DataList.some((item) => item.proId === data.proId)) {
@@ -999,6 +839,7 @@
  },
};
</script>
<style>
.el-tooltip__popper {
  max-width: 800px;
@@ -1034,13 +875,4 @@
  overflow-y: auto;
  border: 1px solid #d9d9d9;
}
/* .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  } */
</style>