saber/src/views/codeRule/ruleManage.vue

<template>
  <div class="container-box">
     <el-row :gutter="20" class="h-100">
        <el-col :span="6" class="h-100">
                <div class="h-100">
                <el-card class="box-card h-100">
                    <div class="tree-container">
                    <el-scrollbar>
                        <el-tree 
                        lazy
                        :load="loadNode"
                        @node-click="handleNodeClick"
                        :props="defaultProps"
                        :expand-on-click-node="false"
                        highlight-current
                        node-key="id"
                        ref="tree"
                        ></el-tree>
                    </el-scrollbar>
                    </div>
                </el-card>
                </div>
        </el-col>
      <template v-if="!isShowDetail">
          <el-col :span="18" class="h-100" v-if="isShowList">
            <div class="h-100 rule-box-all">
               
                <el-card class="box-card  h-100">
                <div slot="header" class="clearfix">
                    <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" @click="goBackFirst"></i>
                    <span>退出</span>
                        <div style="float: right;">
                            <el-button
                            icon="el-icon-plus"
                            size="small"
                            style="background-color:#2550A2;color:white;font-weight:bold;"
                            plain
                            @click="addRule"
                            >新增
                            </el-button>
                            <el-button
                            icon="el-icon-document-copy"
                            size="small"
                            style="background-color:#FFA042;color:white;font-weight:bold;"
                            plain
                            @click="manageFolder"
                            >管理
                            </el-button>
                            
                         
                        </div>
                </div>
                <div class="rule-box">
                    <div class="rule-box-item" v-for="item in ruleItemOptions" :key="item.id" @click="ruleDetailClick">
                        <div class="rule-box-item-icon">
                          <i class="el-icon-folder" style=" cursor: pointer; font-size: 48px;color:orange"></i>
                        </div>
                        <div class="rule-box-item-title">{{ item.title }}</div>
                    </div>
                    
                </div>
                <el-pagination
                style="margin-top: 30px;text-align: center;"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      :total="ruleItemOptions.length"
                      layout="prev, pager, next"
                      class="pagination"
                    >
                    </el-pagination>
                </el-card>
            </div>
        </el-col>
         <el-col :span="18" class="h-100" v-if="!isShowList">
            <div class="h-100 rule-box-all">
               
                <el-card class="box-card  h-100">
                <div slot="header" class="clearfix">
                    <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" @click="goBack"></i>
                    <span @click="goBack">返回上一级</span>
                        <div style="float: right;">
                            <el-button
                            icon="el-icon-plus"
                            size="small"
                            style="background-color:#2550A2;color:white;font-weight:bold;"
                            plain
                            @click="addFile"
                            >新增
                            </el-button>
                            <el-button
                            icon="el-icon-document-copy"
                            size="small"
                            style="background-color:#FFA042;color:white;font-weight:bold;"
                            plain
                            @click="manageFolder"
                            >管理
                            </el-button>
                            
                         
                        </div>
                </div>
                <div class="rule-box">
                    <div class="rule-box-item" v-for="item in ruleItemOptions" :key="item.id" @click="ruleDetailClick1">
                        <div class="rule-box-item-icon">
                          <i class="el-icon-tickets" style=" cursor: pointer; font-size: 48px;color:#2550A2"></i>
                        </div>
                        <div class="rule-box-item-title">{{ item.title }}</div>
                    </div>
                    
                </div>
                <el-pagination
                    style="margin-top: 30px;text-align: center;"
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      :total="ruleItemOptions.length"
                      layout="prev, pager, next"
                      class="pagination"
                    >
                    </el-pagination>
                </el-card>
            </div>
        </el-col>
      </template>
        <el-col :span="18" class="h-100" v-if="isShowDetail">
             
            <el-card class="box-card  h-100" v-if="isShowYpList">
                <div slot="header" class="clearfix">
                    <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;" @click="goBack1"></i>
                    <span>返回上一级</span>
                </div>
                <div class="box-card-title">
                  GB 175-2023
                </div>
                <div class="box-card-content1">
                    <div  class="box-card-content1-left">
                      <div class="box-card-content1-left-item">
                        下达日期：2023-12-12
                      </div>
                      <div class="box-card-content1-left-item">
                        实施日期：2023-12-12
                      </div>
                      <div>
                      <i class="el-icon-document"></i>文件名称.pdf
                      </div>
                    </div>
                    <div  class="box-card-content1-right">
                        <el-button type="danger" size="small" @click="previewRes">效果预览</el-button>
                        <el-button type="warning" size="small">规范更新</el-button>
                    </div>
                </div>
                <div class="box-card-content2">
                  <div class="box-card-content2-top">
                    <div class="box-card-content2-title">
                     <div class="title-container">
                      <span>样品信息</span>
                      <i class="el-icon-circle-plus" @click="addYp"></i>
                    </div>
                    </div>
                    <div class="box-card-content2-list">
                      <div class="box-card-content2-list-item" v-for="(item, index) in ypList" :key="index">
                        <div class="box-card-content2-list-item-title">
                           <span class="eg">if()</span>
                          <span>{{ item.name }}</span>
                        </div>
                        <div class="box-card-content2-list-item-list">
                                <span class="basic-info">基础信息</span>
                                <div class="box-card-content2-list-item-list-basic">
                                    <div class="basic-item-info" v-for="(item1,index1) in item.basic":key="index1" >
                                      {{ item1.name }}
                                    </div>
                                    <div class="operation-icons">
                                      <i class="el-icon-edit" @click.stop="handleEdit(item, index)"></i>
                                      <i class="el-icon-delete" @click.stop="handleDelete(index)"></i>
                                    </div>
                                </div>
                        </div>

                      </div>

                    </div>
                  </div>
                        <div class="box-card-content2-top">
                    <div class="box-card-content2-title">
                     <div class="title-container">
                      <span>技术指标</span>
                      <i class="el-icon-circle-plus" @click="addJs"></i>
                    </div>
                    </div>
                    <div class="box-card-content2-list">
                      <div class="box-card-content2-list-item" v-for="(item, index) in jsList" :key="index">
                        <div class="box-card-content2-list-item-title">
                           <span class="eg">else()</span>
                          <span>{{ item.name }}</span>
                        </div>
                        <div class="box-card-content2-list-item-list">
                                <span class="basic-info">内容</span>
                                <div class="box-card-content2-list-item-list-basic">
                                    <div class="basic-item-info" v-for="(item1,index1) in item.basic":key="index1" >
                                      {{ item1.name }}
                                    </div>
                                    <div class="operation-icons">
                                      <i class="el-icon-edit" @click.stop="handleEdit(item, index)"></i>
                                      <i class="el-icon-delete" @click.stop="handleDelete(index)"></i>
                                    </div>
                                </div>
                        </div>

                      </div>

                    </div>
                  </div>
                  
                </div>
           
                </el-card>
              <el-card class="box-card  h-100" v-if="!isShowYpList&&!isShowJsList">
                <template >
                  <div slot="header" class="clearfix" >
                    <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;"  @click="showYpList"></i>
                    <span  @click="showYpList">退出</span>
                </div>
                <div class="add-yp-title">
                  <span>新增</span>
                </div>
                <div class="add-yp-detail">
                  <el-form label-position="left" label-width="80px" :model="ypDetail"  :rules="ypRuleForm">
                    <el-form-item label="样品信息" prop="name">
                      <el-input v-model="ypDetail.name"></el-input>
                    </el-form-item>
                    <el-form-item label="基础信息">
                      <div class="input-with-icon"  v-for="(item, index) in ypDetail.basic" :key="index">
                        <el-input v-model="item.name"></el-input>
                        <i class="el-icon-circle-plus-outline" @click="addBasicInfo"  v-if="index!==0"></i>
                        <i class="el-icon-remove-outline" @click="removeBasicInfo(index)"></i>
                      </div>
                    </el-form-item>
                    
                  </el-form>
                </div>
                <div class="add-yp-footer">
                   <el-button type="primary">保存</el-button>
                </div>
                </template>
    
            </el-card>
            <el-card v-if="isShowJsList&&!isShowYpList">
              <div slot="header" class="clearfix" >
                    <i class="el-icon-arrow-left" style="margin-right: 5px; cursor: pointer;"  @click="showYpList"></i>
                    <span  @click="showYpList">退出</span>
                </div>
                <div class="add-yp-title">
                  <span>新增</span>
                  <div>
                     <el-button  size="small" style="background: rgb(168, 86, 248);color: white;" icon="el-icon-office-building" @click="conditionsSet">条件设置</el-button>
                         <el-button  size="small" style="background:rgb(37, 80, 162);;color: white;" icon="el-icon-connection" @click="linkEle">关联元素</el-button>
                  </div>
                </div>
                <div class="add-yp-detail">
                  <el-form label-position="left" label-width="80px" :model="jsDetail"  :rules="jsRuleForm">
                    <el-form-item label="检测项" prop="name">
                      <el-input v-model="jsDetail.name"></el-input>
                    </el-form-item>
                    <el-form-item label="技术指标">
                      <div class="input-with-icon"  v-for="(item, index) in jsDetail.basic" :key="index">
                        <el-input placeholder="请输入内容" v-model="item.name" class="input-with-select">
                          <el-select v-model="item.select" slot="prepend" placeholder="请选择符号" style="width: 150px;">
                            <el-option  v-for="(item1,index) in fqOptions" :key="index" :label="item1.label" :value="item1.value"></el-option>
                          </el-select>
                          
                        </el-input>
                        <i class="el-icon-circle-plus-outline" @click="addBasicInfo1"  ></i>
                        <i class="el-icon-remove-outline" @click="removeBasicInfo1(index)" v-if="index!==0"></i>
                      </div>
                    </el-form-item>
                    
                  </el-form>
                </div>
                <div class="add-yp-footer">
                   <el-button type="primary">保存</el-button>
                </div>
            </el-card>
              
         </el-col>
    </el-row>
    <!-- 新增文件夹 -->
    <el-dialog
      title="新增"
      :visible.sync="addDialogVisible"
      width="30%"
      append-to-body

      >
      <div class="input-container">
        <span>规范文件夹名称</span>
        <el-input v-model="titleInput" placeholder="请输入内容" style="width: 300px;"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 管理规范 -->
     <el-dialog title="管理" :visible.sync="manageVisible" width="50%" append-to-body>
        <el-table :data="manageData" border   height="550">
          <el-table-column property="name" label="规范名称" >
            <template slot-scope="scope">
              
              <el-input v-model="scope.row.name" placeholder="请输入内容"></el-input>
            </template>

          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
             
              <el-button type="text" size="small" style="color: rgb(219, 55, 55);" @click="delManange(scope.$index)">删除</el-button>
            </template>

          </el-table-column>
         
        </el-table>
          <div slot="footer" class="dialog-footer">
          <el-button @click="manageVisible = false">取 消</el-button>
          <el-button type="primary" @click="manageVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 新增规范文件 -->
       <el-dialog title="新增" :visible.sync="addFileDialogVisible"  append-to-body width="30%">
        <el-form :model="fileForm" label-position="left" label-width="80px">
          <el-form-item label="规范名称" >
            <el-input v-model="fileForm.name" ></el-input>
          </el-form-item>
          <el-form-item label="下达日期" >
            <el-date-picker
            style="width: 100%;"
              v-model="fileForm.date1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="实施日期" >
            <el-date-picker
            style="width: 100%;"
              v-model="fileForm.date2"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="规范文件" >
            <el-upload
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">允许文件格式.pdf</div>
            </el-upload>
          </el-form-item>
          
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 条件设置 -->
        <ConditionsSet ref="conditionsSetRef" @confirm="handleConditionsConfirm" />
        <!-- 关联元素 -->
        <LinkEle ref="linkEleRef" @confirm="confirmLinkEle" />
        <!-- 效果预览 -->
          <PreviewResult ref="previewResultRef" />
   </div>
</template>
<script>
import {getLazytree} from "@/api/manager/wbsprivate";
import ConditionsSet from './ConditionsSet.vue'
import LinkEle from "./LinkEle.vue";
import PreviewResult from './PreviewResult.vue'
  export default {
  components: {
    ConditionsSet,
    LinkEle,
    PreviewResult
  },
    data() {
      return {
        id: '',
        parentId: '',
        tenant_id:'',
        projectid:'',
        treeId: '',

        defaultProps: {
            children: "children",
            label: "title",
            isLeaf: function (data) {
            return !data.hasChildren || (data.isExistForm==1);
            },
        },
        ruleItemOptions:[
            {id:1,title:'规范名称'},
            {id:2,title:'规范名称'},
            {id:3,title:'规范名称'},
            {id:1,title:'规范名称'},
            {id:2,title:'规范66名称'},
            {id:3,title:'规范名称'},
         
   
        ],
        addDialogVisible:false,
        titleInput:'',
        isShowList:true,
        currentPage: 1,
        pageSize: 40, // 8列 * 5行 = 40
        isShowYpList:true,
        isShowDetail:false,
        ypDetail: {
          name: '',
          basic: [{ name: '' }, { name: '' }, { name: '' }, { name: '' }]
        },
        ypRuleForm: {
          name: [
            { required: true, message: '请输入样品名称', trigger: 'blur' }
          ],
        
        },
        manageVisible: false,
        manageData: [
          { name: '规范1' },
          { name: '规范2' },
          { name: '规范3' },
          { name: '规范4' },
          { name: '规范5' }
        ],
        addFileDialogVisible:false,
        fileForm:{},
        fileList:[],
        ypList:[
          {id:1,name:'样品名称',
          basic:
          [{name:'基本信息1'} , {name:'基本信息2'}    , {name:'基本信息3'}    , {name:'基本信息4'}]
          },  
        ],
        jsList:[
          {id:1,name:'技术指标名称',
          basic:
          [{name:'基本信息1'} , {name:'基本信息2'}    , {name:'基本信息3'}    , {name:'基本信息4'}]
          },  
        ],
        isShowJsList:false,
        jsDetail: {
          name: '',
          basic: [{ name: '',select:[] }, ]
        },
        jsRuleForm: {
          name: [
            { required: true, message: '请输入技术指标名称', trigger: 'blur' }
          ],
        },
        fqOptions: [
          { label: '>', value: '>', },
          { label: '=', value: '=', },
          { label: '<', value: '<' },
          { label: '>=', value: '>=' },
          { label: '<=', value: '<=' },
          { label: '!=', value: '!=' },
        ],
        conditionsSetVisible:false//条件设置弹窗是否显示

       
      };
    },
     computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.ruleItemOptions.slice(start, end)
    }
  },
    created(){
        console.log(this.$route.query,'this.$route.query;');
        const { id, tenant_id,projectid} = this.$route.query;
        this.id = id;
        this.parentId = 0;
        this.tenant_id = tenant_id;
        this.projectid = projectid;
  
    },
    methods: {
      handleNodeClick(data) {
        console.log(data);
        this.treeId = data.id;
      },
      loadNode(node, resolve) {
                let pid = 0;
                if (node.level != 0) {
                    pid = node.data.id;
                }
                getLazytree(this.id, pid, this.tenant_id, this.projectid, {
                    wbsType: 2,
                }).then((res) => {
                    let arr = [];
                    if (Array.isArray(res.data.data)) {
                    arr = res.data.data;
                    }

                    return resolve(arr);
                });
        },
        goBackFirst() {
                this.isShowList = true;
                this.$router.go(-1);
         },
        
        goBack() {
                this.isShowList = true;
         },
         goBack1() {
          
          this.isShowDetail = false;
         },
         addRule(){
          this.addDialogVisible = true;
         },
         ruleDetailClick(){
          this.isShowList = false;
         },
         ruleDetailClick1(){
      
          this.isShowDetail = true;
         },
         addFile(){
         //新增规范文件
         this.addFileDialogVisible = true;
         },
        handleCurrentChange(val) {
        this.currentPage = val
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
      },
      addYp(){
        this.isShowYpList = false;
        this.isShowJsList = false;


      },
      showYpList() {
        this.isShowYpList = true;
      },
       // 添加基础信息行
    addBasicInfo() {
      this.ypDetail.basic.push({ name: '' });
    },
    
    // 删除基础信息行
    removeBasicInfo(index) {
      this.ypDetail.basic.splice(index, 1);
    },
    // 管理文件夹
    manageFolder(){
      this.manageVisible = true;
    },
    delManange(index){
           this.$confirm('删除后，数据将无法恢复，是否确认删除!', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
           this.manageData.splice(index, 1);
          })
    },
      handleEdit(item, index) {
        // 处理编辑逻辑
        console.log('编辑项目:', item, index);
      },

      handleDelete(index) {
        this.$confirm('删除后，数据无法恢复，是否确认删除?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.ypList.splice(index, 1);
          this.$message.success('删除成功');
        }).catch(() => {});
      },
       handleEdit1(item, index) {
        // 处理编辑逻辑
        console.log('编辑项目:', item, index);
      },

      handleDelete1(index) {
        this.$confirm('删除后，数据无法恢复，是否确认删除?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.jsList.splice(index, 1);
          this.$message.success('删除成功');
        }).catch(() => {});
      },
      //新增技术指标
      addJs(){
      
         this.isShowJsList = true;
         this.isShowYpList = false;
        
      },
      addBasicInfo1() {
        this.jsDetail.basic.push({ name: '' });
      },
    
    // 删除基础信息行
    removeBasicInfo1(index) {
      this.jsDetail.basic.splice(index, 1);
    },
    //条件设置
    conditionsSet(){
      if(this.jsDetail.basic[0].name === ''|| this.jsDetail.basic[0].select.length === 0) {
        this.$message.error('请先添加技术指标内容');
        return;
      }
      this.$refs.conditionsSetRef.show(this.jsDetail.basic)

    },
    // 添加确认取消处理方法
    handleConditionsConfirm() {
      console.log('确认条件设置')
    },
    handleConditionsCancel() {
      console.log('取消条件设置') 
    },
    //关联元素
    linkEle() {
      if(this.jsDetail.basic[0].name === ''|| this.jsDetail.basic[0].select.length === 0) {
        this.$message.error('请先添加技术指标内容');
        return;
      }
        this.$refs.linkEleRef.show(this.jsDetail.basic, this.treeId,this.id,  this.projectid);
    },
    confirmLinkEle() {
      console.log('确认关联元素')

    
    },
    //效果预览
    previewRes() {
      this.$refs.previewResultRef.show()
    }
  }
  }
</script>

<style scoped lang="scss">
.container-box {
  height: calc(100vh - 120px);

  box-sizing: border-box;
}

.h-100 {
  height: 100%;
}
.tree-container {
  height: calc(100vh - 120px);
  overflow-y: auto;
}

.box-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  // 内容区域
  .el-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}
.rule-box{
  width: 100%;
  display: grid;
  grid-template-columns: repeat(8, 1fr); 
    grid-template-rows: repeat(4, 1fr);
   gap: 50px;
  padding: 20px;
  height: 600px;
  overflow-y:hidden;

  .rule-box-item{
      text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .rule-box-item-icon {
      margin-bottom: 8px;
 
  }
    .rule-box-item-title {
      font-size: 14px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

}
.input-container {
  display: flex;
  align-items: center;
}

.input-container span {
  margin-right: 10px; /* 根据需要调整间距 */
}
.box-card-title{
  font-weight: bolder;
  font-size: 24px;
}
.box-card-content1{
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  .box-card-content1-left{
    display: flex;
    .box-card-content1-left-item{
      margin-right: 25px;
    }
    
  }
}
.box-card-content2{
  margin-top: 10px;


  .box-card-content2-title{
    color:  rgba(130, 130, 130, 1);
    font-size: 10px;;
    width: 98%;
    padding-left: 20px;
    font-size: 18px;
    line-height: 40px;
    background: rgb(240, 240, 240);
      .title-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20px;

    i {
      cursor: pointer;
      font-size: 22px;
      color: #2550A2;
      // 添加过渡效果
      &:hover {
        color: #409EFF;
      }
    }
  }
  }
}

.box-card-content2-bottom{
  margin-top: 20px;
}
.add-yp-title{
  font-size: 20px;
  font-weight: bold;
  padding: 10px;
  display: flex;
  justify-content: space-between;
 
}
.input-with-icon {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  
  .el-input {
    flex: 1;
  }
  
  i {
    margin-left: 10px;
    font-size: 20px;
    cursor: pointer;
    
    &.el-icon-circle-plus-outline {
      color: #409EFF;
      &:hover {
        color: #66b1ff;
      }
    }
    
    &.el-icon-remove-outline {
      color: #F56C6C;
      &:hover {
        color: #f78989;
      }
    }
  }
}
.add-yp-detail{
    flex: 1;
    overflow-y: auto;
   padding: 20px;
   height: calc(100vh - 342px); /* 减去标题和底部按钮的高度 */
}
// 新增底部按钮容器样式
.add-yp-footer {
  display: flex;
  justify-content: center;
  padding: 20px 0;
  // 可选: 添加上边框
  border-top: 1px solid #EBEEF5;
}
.box-card-content2-list{
  margin-top: 20px;
  max-height: 300px;
  overflow-y: auto;
  
  .eg{
    color:rgba(37, 80, 162, 1);
    margin-right: 10px;
  }

  .box-card-content2-list-item{
    height: 80px;
    padding: 10px;
    border: 2px solid #EBEEF5;
    margin-bottom: 10px;


   
  }
  .box-card-content2-list-item-list{
    display: flex;
    margin-top: 20px;
    align-items: center;
    position: relative;
    .operation-icons {
    position: absolute;
    right: 10px;
    top: 10px;
    display: flex;
    gap: 10px;

    i {
      cursor: pointer;
      font-size: 16px;

      &.el-icon-edit {
        color: #409EFF;
        &:hover {
          color: #66b1ff;
        }
      }
      
      &.el-icon-delete {
        color: #F56C6C;
        &:hover {
          color: #f78989;
        }
      }
    }
  }
    .basic-info{
      color: gray;
      font-size: 14px;
    }
    .box-card-content2-list-item-list-basic{
      display: flex;
      margin-left: 10px;
      width: 100%;
      overflow-x: auto;
      flex: 1;

      .basic-item-info{
        margin-right: 10px;
        margin-right: 20px; 
            flex-shrink: 0; // 防止项目被压缩

        
      }
    }
  }
}
</style>