董国庆
2025-04-21 71510a82c879609f75690792842664968e463a1b
检验报告管理
3个文件已添加
1个文件已修改
960 ■■■■■ 已修改文件
src/router/index.js 22 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/dataManagement/inspectionReport/components/addDialog.vue 424 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/dataManagement/inspectionReport/detail.vue 312 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/dataManagement/inspectionReport/list.vue 202 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/index.js
@@ -265,7 +265,7 @@
            {
                path: "originalRecordTest",
                meta: {
                    title: "原始记录检测",
                    title: "原始检验记录",
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/originalRecordTest/list.vue"),
@@ -274,12 +274,30 @@
                path: "originalRecordTest/detail",
                name: "OriginalRecordTestDetail",
                meta: {
                    title: "原始记录检测详情",
                    title: "原始检验记录详情",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/originalRecordTest/detail.vue"),
            },
            {
                path: "inspectionReport",
                meta: {
                    title: "检验报告管理",
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/inspectionReport/list.vue"),
            },
            {
                path: "inspectionReport/detail",
                name: "inspectionReportDetail",
                meta: {
                    title: "检验报告详情",
                    hide: true,
                    keepAlive: true,
                },
                component: () => import("../views/dataManagement/inspectionReport/detail.vue"),
            },
        ],
    },
    {
src/views/dataManagement/inspectionReport/components/addDialog.vue
New file
@@ -0,0 +1,424 @@
<template>
  <el-dialog
    title="新增检测数据"
    :visible.sync="dialogVisible"
    width="60%"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <div class="sample-dialog">
      <div class="sample-content">
        <div class="form-content">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-position="top"
          >
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="检测样编号" prop="sampleCode">
                  <el-input
                    v-model="form.sampleCode"
                    placeholder="请输入检测样编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="检测数据" prop="testData">
                  <el-input
                    v-model="form.testData"
                    placeholder="请输入检测数据"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="检测类型" prop="testTypes">
                  <el-checkbox-group v-model="form.testTypes">
                    <el-checkbox label="photo">拍照</el-checkbox>
                    <el-checkbox label="spectrum">图谱</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="showPhotoUpload" :gutter="20">
              <el-col :span="24">
                <el-form-item label="检测拍照" prop="photos">
                  <div v-if="isIPad">
                    <el-button type="primary" @click="handleIPadPhoto">拍照</el-button>
                    <el-button type="primary" @click="handleIPadUpload">上传</el-button>
                  </div>
                  <el-upload
                    v-else
                    class="upload-demo"
                    action="#"
                    :file-list="photoList"
                    :auto-upload="false"
                    list-type="picture-card"
                    :on-change="handlePhotoChange"
                  >
                    <i class="el-icon-plus"></i>
                    <!-- <div class="el-upload__tip" slot="tip">支持 jpg、png 格式文件</div> -->
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="showSpectrumUpload" :gutter="20">
              <el-col :span="24">
                <el-form-item label="检测图谱" prop="spectrums">
                  <div v-if="isIPad">
                    <el-button type="primary" @click="handleIPadSpectrum">选择图谱</el-button>
                  </div>
                  <el-upload
                    v-else
                    class="upload-file"
                    action="#"
                    :file-list="spectrumList"
                    :auto-upload="false"
                    :on-change="handleSpectrumChange"
                    :on-remove="handleSpectrumRemove"
                  >
                    <el-button type="primary">
                      <i class="el-icon-upload"></i> 选择文件
                    </el-button>
                    <div class="el-upload__tip" slot="tip">支持 jpg、png、pdf 格式文件</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer select-member-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: "AddDialog",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isIPad: /iPad/i.test(navigator.userAgent),
      form: {
        sampleCode: "",
        testData: "",
        testTypes: ["photo"], // 默认选中拍照
        photos: [],
        spectrums: []
      },
      rules: {
        sampleCode: [
          { required: true, message: "请输入检测样编号", trigger: "blur" }
        ],
        testData: [
          { required: true, message: "请输入检测数据", trigger: "blur" }
        ],
        testTypes: [
          {
            type: 'array',
            required: true,
            message: "请至少选择一种检测类型",
            trigger: "change"
          }
        ],
        photos: [
          {
            required: true,
            message: "请上传检测照片",
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.testTypes.includes('photo') && (!this.photoList || !this.photoList.length)) {
                callback(new Error('请上传检测照片'));
              } else {
                callback();
              }
            }
          }
        ],
        spectrums: [
          {
            required: true,
            message: "请上传检测图谱",
            trigger: "change",
            validator: (rule, value, callback) => {
              if (this.form.testTypes.includes('spectrum') && (!this.spectrumList || !this.spectrumList.length)) {
                callback(new Error('请上传检测图谱'));
              } else {
                callback();
              }
            }
          }
        ]
      },
      photoList: [],
      spectrumList: []
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    },
    showPhotoUpload() {
      return this.form.testTypes.includes('photo');
    },
    showSpectrumUpload() {
      return this.form.testTypes.includes('spectrum');
    }
  },
  methods: {
    setFormData(data) {
      // 设置基础表单数据
      this.form.sampleCode = data.sampleCode;
      this.form.testData = data.testData;
      this.form.testTypes = data.testTypes;
      // 设置照片列表
      if (data.photos && data.photos.length) {
        this.photoList = data.photos.map(photo => ({
          name: photo.name,
          url: photo.url,
          status: 'success'
        }));
      } else {
        this.photoList = [];
      }
      // 设置图谱列表
      if (data.spectrums && data.spectrums.length) {
        this.spectrumList = data.spectrums.map(spectrum => ({
          name: spectrum.name,
          url: spectrum.url,
          status: 'success'
        }));
      } else {
        this.spectrumList = [];
      }
      // 重置表单校验状态
      this.$nextTick(() => {
        this.$refs.form?.clearValidate();
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.$refs.form?.resetFields();
      this.photoList = [];
      this.spectrumList = [];
      this.form = {
        sampleCode: "",
        testData: "",
        testTypes: ["photo"],
        photos: [],
        spectrums: []
      };
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const submitData = {
            ...this.form,
            photos: this.photoList,
            spectrums: this.spectrumList
          };
          this.$emit("success", submitData);
        }
      });
    },
    handlePhotoChange(file, fileList) {
      this.photoList = fileList;
      this.$refs.form.validateField('photos');
    },
    handleSpectrumChange(file, fileList) {
      this.spectrumList = fileList;
      this.$refs.form.validateField('spectrums');
    },
    handleSpectrumRemove(file) {
      // 处理文件移除逻辑
    },
    // iPad 相关方法
    handleIPadPhoto() {
      // TODO: 调用 iPad 拍照功能
      console.log('调用 iPad 拍照功能');
    },
    handleIPadUpload() {
      // TODO: 调用 iPad 上传功能
      console.log('调用 iPad 上传功能');
    },
    handleIPadSpectrum() {
      // TODO: 调用 iPad 选择图谱功能
      console.log('调用 iPad 选择图谱功能');
    }
  }
};
</script>
<style scoped lang="less">
::v-deep .el-dialog__body {
  padding: 0;
  max-height: calc(100vh - 200px);  // 设置最大高度
}
::v-deep .el-dialog {
  margin-top: 5vh !important;  // 调整弹窗位置
  max-height: 90vh;  // 设置弹窗最大高度
  display: flex;
  flex-direction: column;
  .el-dialog__body {
    flex: 1;
    overflow: hidden;  // 防止出现双滚动条
  }
}
.sample-dialog {
  height: 100%;
  .sample-content {
    background: #ffffff;
    border-radius: 10px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    .form-content {
      flex: 1;
      overflow-y: auto;
      padding: 0 10px;
      max-height: calc(90vh - 250px);  // 设置内容区域最大高度
      &::-webkit-scrollbar {
        width: 6px;
      }
      &::-webkit-scrollbar-thumb {
        background: #c0c4cc;
        border-radius: 3px;
      }
      &::-webkit-scrollbar-track {
        background: #f5f7fa;
      }
    }
  }
}
.dialog-footer {
  align-items: center;
  display: flex;
  justify-content: center;
  padding: 15px 20px;
  border-top: 1px solid #e4e7ed;
  margin-top: auto;  // 保持在底部
  button {
    width: 150px;
  }
}
.upload-demo {
  ::v-deep {
    .el-upload--picture-card {
      width: 120px;
      height: 120px;
      line-height: 120px;
    }
    .el-upload-list--picture-card {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      .el-upload-list__item {
        width: 120px;
        height: 120px;
        margin: 0;
      }
    }
    // 让上传按钮始终显示在列表最后
    .el-upload--picture-card {
      order: 9999;
      margin: 0;
    }
  }
  // 包裹容器也使用flex布局
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;  // 最后一行不要margin
  }
}
::v-deep .el-form-item--small.el-form-item {
  margin-bottom: 0;
}
::v-deep .el-form-item__label {
  padding-bottom: 8px;
}
// 优化表单布局
::v-deep .el-form {
  .el-form-item {
    margin-bottom: 15px;  // 减小表单项间距
    &:last-child {
      margin-bottom: 0;
    }
  }
}
// 优化上传区域布局
::v-deep .el-upload-list--picture-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;  // 设置图片间距
}
.upload-file {
  ::v-deep {
    .el-upload-list {
      margin-top: 10px;
    }
    .el-upload-list__item {
      transition: all .3s;
      &:hover {
        background-color: #f5f7fa;
      }
    }
    .el-upload__tip {
      color: #909399;
      font-size: 12px;
      margin-top: 8px;
    }
  }
}
</style>
src/views/dataManagement/inspectionReport/detail.vue
New file
@@ -0,0 +1,312 @@
<template>
  <Card>
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      inline
      label-position="top"
    >
      <div class="header-title" style="margin-bottom: 38px">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>所属实验调度</div>
        </div>
        <el-button type="primary" class="el-icon-plus" @click="handleAddTask">选择实验调度</el-button>
      </div>
      <Table :data="taskTableData" :total="0" :height="null" class="rwuTable">
        <el-table-column prop="index" label="所属项目课题方案" width="200"></el-table-column>
        <el-table-column prop="sampleCode" label="实验编号"></el-table-column>
        <el-table-column prop="testData" label="实验名称"></el-table-column>
        <el-table-column prop="testData" label="通知时间"></el-table-column>
        <el-table-column prop="testData" label="实验开始时间"></el-table-column>
        <el-table-column prop="testData" label="实验结束时间"></el-table-column>
        <el-table-column prop="testData" label="参加人员"></el-table-column>
        <el-table-column prop="testData" label="状态"></el-table-column>
      </Table>
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <div>本次检验结果总表</div>
        </div>
      </div>
      <div class="header-title">
        <div class="header-title-left">
          <img src="@/assets/public/headercard.png" />
          <span>本次检验结果</span>
        </div>
      </div>
      <div class="add-project-footer">
        <el-button type="primary" class="save-btn">发送</el-button>
        <el-button>存草稿</el-button>
      </div>
    </el-form>
    <!-- 添加检测数据弹窗 -->
    <add-dialog
      ref="addDialog"
      :visible.sync="dialogVisible"
      @success="handleTaskSubmit"
    />
  </Card>
</template>
<script>
import AddDialog from './components/addDialog.vue'
import moment from 'moment'
export default {
  name: "AddProject",
  components: {
    AddDialog
  },
  data() {
    return {
      dialogVisible: false,
      isEdit: false,
      currentEditIndex: -1,
      form: {
        recordNo: '',
        testItemName: '',
        testItemNo: '',
        testMethodName: '',
        testMethodNo: ''
      },
      rules: {
        recordNo: [{ required: true, message: "请输入原始检验记录编号", trigger: "blur" }],
        testItemName: [{ required: true, message: "请输入检测项名字", trigger: "blur" }],
        testItemNo: [{ required: true, message: "请输入检测项编号", trigger: "blur" }],
        testMethodName: [{ required: true, message: "请输入检测方法名字", trigger: "blur" }],
        testMethodNo: [{ required: true, message: "请输入检测方法编号", trigger: "blur" }]
      },
      taskTableData: []
    };
  },
  methods: {
    handleAddTask() {
      this.isEdit = false;
      this.currentEditIndex = -1;
      this.dialogVisible = true;
    },
    handleEditTask(row) {
      this.isEdit = true;
      this.currentEditIndex = this.taskTableData.findIndex(item => item === row);
      const editData = {
        sampleCode: row.sampleCode,
        testData: row.testData,
        testTypes: [],
        photos: [],
        spectrums: []
      };
      if (row.photos && row.photos.length > 0) {
        editData.testTypes.push('photo');
        editData.photos = row.photos.map(photo => ({
          name: photo.name,
          url: photo.url,
          raw: null
        }));
      }
      if (row.spectrums && row.spectrums.length > 0) {
        editData.testTypes.push('spectrum');
        editData.spectrums = row.spectrums.map(spectrum => ({
          name: spectrum.name,
          url: spectrum.url,
          raw: null
        }));
      }
      this.$nextTick(() => {
        this.dialogVisible = true;
        this.$refs.addDialog.setFormData(editData);
      });
    },
    handleDeleteTask(row) {
      this.$confirm("确认删除该检测数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const index = this.taskTableData.findIndex((item) => item === row);
          if (index > -1) {
            const item = this.taskTableData[index];
            if (item.photos) {
              item.photos.forEach(photo => {
                if (photo.url.startsWith('blob:')) {
                  URL.revokeObjectURL(photo.url);
                }
              });
            }
            if (item.spectrums) {
              item.spectrums.forEach(spectrum => {
                if (spectrum.url.startsWith('blob:')) {
                  URL.revokeObjectURL(spectrum.url);
                }
              });
            }
            this.taskTableData.splice(index, 1);
            this.$message.success("删除成功");
          }
        })
        .catch(() => {});
    },
    handleTaskSubmit(formData) {
      const photos = formData.photos.map(file => ({
        name: file.name,
        url: file.url || URL.createObjectURL(file.raw)
      }));
      const spectrums = formData.spectrums.map(file => ({
        name: file.name,
        url: file.url || URL.createObjectURL(file.raw)
      }));
      const newData = {
        sampleCode: formData.sampleCode,
        testData: formData.testData,
        testResult: '',
        photos,
        spectrums,
        createTime: this.isEdit ? this.taskTableData[this.currentEditIndex].createTime : moment().format('YYYY-MM-DD HH:mm:ss')
      };
      if (this.isEdit && this.currentEditIndex > -1) {
        const oldData = this.taskTableData[this.currentEditIndex];
        if (oldData.photos) {
          oldData.photos.forEach(photo => {
            if (photo.url.startsWith('blob:') && !photos.find(p => p.url === photo.url)) {
              URL.revokeObjectURL(photo.url);
            }
          });
        }
        if (oldData.spectrums) {
          oldData.spectrums.forEach(spectrum => {
            if (spectrum.url.startsWith('blob:') && !spectrums.find(s => s.url === spectrum.url)) {
              URL.revokeObjectURL(spectrum.url);
            }
          });
        }
        this.taskTableData.splice(this.currentEditIndex, 1, newData);
        this.$message.success('更新成功');
      } else {
        this.taskTableData.push(newData);
        this.$message.success('添加成功');
      }
      this.dialogVisible = false;
      this.isEdit = false;
      this.currentEditIndex = -1;
    },
    getPhotoUrls(photos) {
      return photos.map(photo => photo.url);
    }
  }
};
</script>
<style scoped lang="less">
.el-form--inline .el-form-item {
  margin-right: 83px;
}
.header-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 38px;
  .header-title-left {
    display: flex;
    align-items: center;
    gap: 13px;
    img {
      width: 12px;
      height: 19px;
    }
    span {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";
    }
    div {
      flex-shrink: 0;
      font-weight: bold;
      font-size: 18px;
      color: #222222;
      line-height: 27px;
      font-family: "Source Han Sans CN Bold Bold";
      &:before {
        content: "*";
        color: #f56c6c;
        margin-right: 4px;
      }
    }
  }
}
.rwuTable {
  width: 85%;
  padding-left: 40px;
}
.add-project-footer {
  margin-top: 43px;
  button {
    width: 220px;
  }
  .save-btn {
    margin-right: 20px;
  }
}
.image-preview {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  .preview-image {
    width: 50px;
    height: 50px;
    border-radius: 4px;
    cursor: pointer;
  }
  .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: #f5f7fa;
    color: #909399;
  }
}
.spectrum-link {
  display: block;
  margin-bottom: 5px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
src/views/dataManagement/inspectionReport/list.vue
New file
@@ -0,0 +1,202 @@
<template>
  <div class="list">
    <TableCustom :queryForm="form" :tableData="tableData" :total="total" :height="null">
      <template #search>
        <el-form :model="form" labelWidth="auto" inline>
          <el-form-item label="项目课题方案名称:">
            <el-input v-model="form.projectPlan" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="所属实验编号:">
            <el-input v-model="form.experimentNo" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建人:">
            <el-input v-model="form.creator" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="创建时间:">
            <el-date-picker
              v-model="form.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="实验名称:">
            <el-input v-model="form.experimentName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="default" @click="resetForm">重置</el-button>
            <el-button type="primary" style="margin-left: 10px;" @click="handleSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #setting>
        <div class="tableTitle" @click="handleAdd">
          <div class="flex a-center">
            <div class="title active">新增检验报告</div>
          </div>
        </div>
      </template>
      <template #table>
        <el-table-column prop="projectPlan" label="所属项目课题方案" ></el-table-column>
        <el-table-column prop="experimentNo" label="所属实验编号" ></el-table-column>
        <el-table-column prop="experimentName" label="实验名称" ></el-table-column>
        <el-table-column prop="createTime" label="创建时间" ></el-table-column>
        <el-table-column prop="creator" label="创建人" ></el-table-column>
        <el-table-column prop="status" label="状态" >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === '待提交' ? 'warning' : 'success'">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="handleSubmit(scope.row)">提交</el-button>
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </template>
    </TableCustom>
  </div>
</template>
<script>
import store from '../../../store';
export default {
  name: "OriginalRecordTest",
  data() {
    return {
      form: {
        projectPlan: "",
        experimentNo: "",
        creator: "",
        createTime: [],
        experimentName: ""
      },
      tableData: [
        {
          id: '1',
          projectPlan: '名称名称名称',
          experimentNo: '31423764',
          experimentName: '名称名称名称',
          creator: '张三',
          createTime: '2024-01-08',
          status: '待提交'
        }
      ],
      total: 5
    };
  },
  created() {
    this.getTableData();
  },
  methods: {
    resetForm() {
      this.form = {
        projectPlan: "",
        experimentNo: "",
        creator: "",
        createTime: [],
        experimentName: ""
      };
    },
    handleSearch() {
      this.getTableData();
    },
    handleAdd(){
      this.$router.push({
        path: "/dataManagement/inspectionReport/detail",
        query: {
          type: 'add'
        }
      });
    },
    handleEdit(row) {
      this.$router.push({
        path: "/dataManagement/inspectionReport/detail",
        query: {
          id: row.id,
          type: 'edit'
        }
      });
    },
    handleSubmit(row) {
      this.$confirm('确认提交该检验报告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO: 调用提交接口
        this.$message({
          type: 'success',
          message: '提交成功!'
        });
        this.getTableData();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消提交'
        });
      });
    },
    getTableData() {
      this.tableData = [
        {
          id: '1',
          projectPlan: '名称名称名称',
          experimentNo: '31423764',
          experimentName: '名称名称名称',
          creator: '张三',
          createTime: '2024-01-08',
          status: '待提交'
        },
        {
          id: '2',
          projectPlan: '项目方案2',
          experimentNo: '31423765',
          experimentName: '实验名称2',
          creator: '李四',
          createTime: '2024-01-09',
          status: '已提交'
        }
      ];
      this.total = this.tableData.length;
    }
  }
};
</script>
<style scoped lang="less">
.list {
  height: 100%;
}
.flex {
  display: flex;
  align-items: center;
}
.tableTitle {
  display: flex;
  padding-bottom: 20px;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  .title {
    background: #fafafc;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #dcdfe6;
    padding: 16px 29px;
    font-weight: bold;
    font-size: 18px;
    color: #606266;
    width: unset;
  }
  .active {
    color: #049c9a;
    background: #ffffff;
    border-radius: 8px 8px 0px 0px;
    border: 1px solid #049c9a;
  }
}
</style>