| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <el-form |
| | | :model="queryParams" |
| | | ref="queryForm" |
| | | size="small" |
| | | :inline="true" |
| | | label-width="68px" |
| | | @submit.native.prevent |
| | | > |
| | | <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px" @submit.native.prevent> |
| | | <el-form-item label="体检号" prop="reportDoctorCode"> |
| | | <el-input |
| | | ref="inputName" |
| | | v-model="queryParams.tjNum" |
| | | placeholder="请输入体检号" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 170px" |
| | | @input="onInput" |
| | | /> |
| | | <el-input ref="inputName" v-model="queryParams.tjNum" placeholder="请输入体检号" clearable |
| | | @keyup.enter.native="handleQuery" @input="onInput" style="width: 170px" /> |
| | | </el-form-item> |
| | | <!-- <el-form-item label="姓名" prop="name"> |
| | | <el-input |
| | | v-model="queryParams.name" |
| | | placeholder="请输入姓名" |
| | | clearable |
| | | @keyup.enter.native="handleQuery" |
| | | style="width: 110px" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="登记时间" prop="createTimeList"> |
| | | <el-date-picker |
| | | v-model="createTimeList" |
| | | type="datetimerange" |
| | | align="right" |
| | | :picker-options="pickerOptions" |
| | | style="width: 310px" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | format="yyyy.MM.dd" |
| | | value-format="yyyy.MM.dd " |
| | | @change="handleDateChange" |
| | | > |
| | | </el-date-picker> |
| | | </el-form-item> --> |
| | | <el-form-item> |
| | | <el-button |
| | | type="primary" |
| | | icon="el-icon-search" |
| | | size="mini" |
| | | @click="handleQuery" |
| | | style="margin-right: 15px" |
| | | >查询</el-button |
| | | > |
| | | <!-- <el-button size="mini" @click="tongbu(scope.row)" |
| | | >同步</el-button |
| | | > --> |
| | | <el-button |
| | | icon="el-icon-refresh" |
| | | type="primary" |
| | | size="mini" |
| | | @click="resetQuery" |
| | | >重置</el-button |
| | | > |
| | | <el-button |
| | | icon="el-icon-check" |
| | | type="primary" |
| | | size="mini" |
| | | style="margin-right: 15px" |
| | | @click="tongbu" |
| | | :disabled="!selectedFirstTable" |
| | | >同步</el-button |
| | | > |
| | | <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery" style="margin-right: 15px"> |
| | | 查询 |
| | | </el-button> |
| | | <el-button icon="el-icon-refresh" type="primary" size="mini" @click="resetQuery"> |
| | | 重置 |
| | | </el-button> |
| | | <el-button icon="el-icon-check" type="primary" size="mini" style="margin-right: 15px" @click="tongbu" |
| | | :disabled="!selectedFirstTable"> |
| | | 同步 |
| | | </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <!-- <el-radio-group |
| | | v-model="checkStatus" |
| | | @input="radioChange" |
| | | style="margin: 10px 15px" |
| | | > |
| | | </el-radio-group> --> |
| | | |
| | | <div class="table-title"> |
| | | <h3>检查记录</h3> |
| | | <div class="table-title table-header"> |
| | | <div style="text-align: center;">检查记录</div> |
| | | </div> |
| | | <!-- v-loading="loading" :row-class-name="tableRowClassName" @current-change="handleCurrentChange" --> |
| | | <el-table |
| | | id="ta" |
| | | ref="tb" |
| | | :data="exaLists" |
| | | v-loading="loading" |
| | | border |
| | | height="350" |
| | | @current-change="handleCurrentChange" |
| | | @selection-change="handleSelectionChange" |
| | | <el-table ref="tb" :data="exaLists" v-loading="loading" border style="width: 100%" height="350" |
| | | @current-change="handleCurrentChange" @selection-change="handleSelectionChange" |
| | | :row-class-name="tableRowClassName" |
| | | > |
| | | <el-table-column |
| | | fixed |
| | | type="selection" |
| | | align="center" |
| | | label="选择" |
| | | width="40" |
| | | > |
| | | <!-- :selectable="isSelectable" --> |
| | | </el-table-column> |
| | | |
| | | <el-table-column label="姓名" align="center" prop="name" width="80px" /> |
| | | <el-table-column label="性别" align="center" prop="gender" width="80px" /> |
| | | <el-table-column |
| | | label="年龄" |
| | | align="center" |
| | | prop="patientAge" |
| | | width="80px" |
| | | > |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="送检科室" |
| | | align="center" |
| | | prop="deptName" |
| | | width="100px" |
| | | /> |
| | | |
| | | <el-table-column |
| | | label="检查项目" |
| | | align="center" |
| | | prop="checkParts" |
| | | width="150px" |
| | | /> |
| | | <!-- :formatter="formatDate" --> |
| | | <el-table-column |
| | | label="报告时间" |
| | | align="center" |
| | | prop="examinationDate" |
| | | width="150px" |
| | | /> |
| | | |
| | | <el-table-column label="门诊号" align="center" prop="mzh" width="140px" /> |
| | | <el-table-column |
| | | label="申请单号" |
| | | align="center" |
| | | prop="brid" |
| | | width="145px" |
| | | /> |
| | | <el-table-column |
| | | label="结果状态" |
| | | align="center" |
| | | prop="diagnosis" |
| | | width="150" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | <!-- :show-overflow-tooltip="true" --> |
| | | <el-table-column |
| | | label="报告医师" |
| | | align="center" |
| | | prop="reportDoctorName" |
| | | width="120px" |
| | | /> |
| | | <el-table-column |
| | | label="检查医师名" |
| | | align="center" |
| | | prop="checkDoctorName" |
| | | width="120px" |
| | | /> |
| | | |
| | | <el-table-column |
| | | label="结果表现" |
| | | align="center" |
| | | prop="examination" |
| | | :show-overflow-tooltip="true" |
| | | /> |
| | | :header-cell-style="{ background: '#aad8df', fontSize: '14px', color: '#333' }"> |
| | | <el-table-column fixed type="selection" align="center" label="选择" width="50" /> |
| | | <el-table-column label="姓名" align="center" prop="name" width="80" /> |
| | | <el-table-column label="性别" align="center" prop="gender" width="80" /> |
| | | <el-table-column label="年龄" align="center" prop="patientAge" width="80" /> |
| | | <el-table-column label="送检科室" align="center" prop="deptName" width="100" /> |
| | | <el-table-column label="检查项目" align="center" prop="checkParts" width="150" /> |
| | | <el-table-column label="报告时间" align="center" prop="examinationDate" width="153" :formatter="formatDate" /> |
| | | <el-table-column label="门诊号" align="center" prop="mzh" width="140" /> |
| | | <el-table-column label="申请单号" align="center" prop="brid" width="145" /> |
| | | <el-table-column label="结果状态" align="center" prop="diagnosis" width="150" :show-overflow-tooltip="true" /> |
| | | <el-table-column label="报告医师" align="center" prop="reportDoctorName" width="120" /> |
| | | <el-table-column label="检查医师名" align="center" prop="checkDoctorName" width="120" /> |
| | | <el-table-column label="结果表现" align="center" prop="examination" :show-overflow-tooltip="true" /> |
| | | </el-table> |
| | | |
| | | <div class="table-title"> |
| | | <h3>体检记录</h3> |
| | | <h3> |
| | | 体检记录: |
| | | <span class="highlight">姓名:{{ infoList.tjCustomerName || "暂无" }}</span> |
| | | <span class="highlight">性别:{{ infoList.tjCustomerSex == 0 ? "男" : infoList.tjCustomerSex == 1 ? "女" : "暂无" |
| | | }}</span> |
| | | <span class="highlight">年龄:{{ infoList.tjCustomerAge || "暂无" }}</span> |
| | | </h3> |
| | | </div> |
| | | <el-table |
| | | border |
| | | max-height="280" |
| | | ref="tab1" |
| | | :data="checkList" |
| | | v-loading="loading" |
| | | <el-table border max-height="280" ref="tab1" :data="checkList" v-loading="loading" style="width: 100%" |
| | | @selection-change="handleSelectionChangeSecond" |
| | | > |
| | | <el-table-column type="selection" width="55"> </el-table-column> |
| | | <el-table-column |
| | | label="状态" |
| | | align="center" |
| | | prop="type" |
| | | :show-overflow-tooltip="true" |
| | | min-width="60" |
| | | > |
| | | :header-cell-style="{ background: '#aad8df', fontSize: '14px', color: '#333' }"> |
| | | <el-table-column type="selection" width="60" /> |
| | | <el-table-column label="状态" align="center" prop="type" :show-overflow-tooltip="true" min-width="60"> |
| | | <template slot-scope="scope"> |
| | | <span v-if="scope.row.type == '0'">未检</span> |
| | | <span v-if="scope.row.type == '1'">已检</span> |
| | |
| | | <span v-if="scope.row.type == '3'">延期</span> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column |
| | | label="科室" |
| | | align="center" |
| | | prop="deptName" |
| | | min-width="115" |
| | | /> |
| | | <el-table-column |
| | | label="项目" |
| | | align="center" |
| | | prop="proName" |
| | | min-width="160" |
| | | /> |
| | | <el-table-column |
| | | label="收费方式" |
| | | align="center" |
| | | prop="sffs" |
| | | min-width="80" |
| | | /> |
| | | <el-table-column |
| | | label="是否收费" |
| | | align="center" |
| | | prop="isPay" |
| | | min-width="80" |
| | | /> |
| | | <el-table-column |
| | | label="检查时间" |
| | | align="center" |
| | | prop="bcupdateTime" |
| | | min-width="160" |
| | | /> |
| | | |
| | | <el-table-column |
| | | label="最后修改时间" |
| | | align="center" |
| | | prop="zhupdateTime" |
| | | min-width="160" |
| | | /> |
| | | <el-table-column label="科室" align="center" prop="deptName" min-width="115" /> |
| | | <el-table-column label="项目" align="center" prop="proName" min-width="160" /> |
| | | <el-table-column label="收费方式" align="center" prop="sffs" min-width="80" /> |
| | | <el-table-column label="是否收费" align="center" prop="isPay" min-width="80" /> |
| | | <el-table-column label="检查时间" align="center" prop="bcupdateTime" min-width="160" /> |
| | | <el-table-column label="最后修改时间" align="center" prop="zhupdateTime" min-width="160" /> |
| | | </el-table> |
| | | |
| | | <div class="pag"> |
| | | <div class="pag1"> |
| | | <!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :pager-count="5" :current-page.sync="currentPage1" :current-page="page" |
| | | :page-sizes="pageSize" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total"> |
| | | </el-pagination> --> |
| | | <!-- <pagination |
| | | v-show="total > 0" |
| | | :total="total" |
| | | :pager-count="5" |
| | | :page.sync="queryParams.page" |
| | | :limit.sync="queryParams.pageSize" |
| | | @pagination="getList" |
| | | /> --> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { getLeftList, getRightList, asyncPacs } from "@/api/doctor/pacsCheck"; |
| | | import { getOrderList } from "@/api/hosp/order"; |
| | | import moment from "moment"; |
| | | |
| | | export default { |
| | | dicts: ["dict_tj_status"], |
| | | data() { |
| | | return { |
| | | infoList: {}, |
| | | dis: false, |
| | | code: null, |
| | | createTimeList: "", |
| | | total: 0, |
| | | loading: false, |
| | | isSyncing: false, |
| | | // 查询参数 |
| | | isFetchingRightTableData: false, |
| | | queryParams: { |
| | | // page: 1, |
| | | // pageSize: 20, |
| | | name: null, |
| | | start: null, |
| | | end: null, |
| | | tjNum: null, |
| | | }, |
| | | // 绑定单选按钮 |
| | | checkStatus: "0", |
| | | exaLists: [], |
| | | selectedFirstTable: null, // 第一个表格选中行 |
| | | selectedSecondTable: [], // 第二个表格选中行 |
| | | // 表单参数 |
| | | selectedFirstTable: null, |
| | | selectedSecondTable: [], |
| | | form: {}, |
| | | clearTimeSet: null, |
| | | tjNumbers: "", |
| | |
| | | this.$refs.inputName.focus(); |
| | | }); |
| | | }, |
| | | |
| | | methods: { |
| | | onInput(val) { |
| | | this.inputVal = val.replace(/\s+/g, ""); // 清除所有空格 |
| | | this.queryParams.tjNum = val.replace(/\s+/g, ""); |
| | | }, |
| | | |
| | | handleDateChange(val) { |
| | | if (val && val.length === 2) { |
| | | this.queryParams.start = val[0]; // 设置开始时间 |
| | | this.queryParams.end = val[1]; // 设置结束时间 |
| | | this.queryParams.start = val[0]; |
| | | this.queryParams.end = val[1]; |
| | | } else { |
| | | this.queryParams.start = null; |
| | | this.queryParams.end = null; |
| | | } |
| | | console.log("Query Params:", this.queryParams); |
| | | }, |
| | | // isSelectable(row) { |
| | | // return !!row.mzh; |
| | | // }, |
| | | |
| | | tableRowClassName({ row }) { |
| | | return !row.mzh ? "row-disabled" : ""; |
| | | return !row.brid ? "row-disabled" : ""; |
| | | }, |
| | | |
| | | formatDate(row) { |
| | | if (!row.examinationDate) return ""; |
| | | |
| | | // 使用 moment 解析指定格式的日期字符串 |
| | | const date = moment(row.examinationDate, "MM DD YYYY hh:mmA"); |
| | | |
| | | if (!date.isValid()) return "无效日期"; |
| | | |
| | | // 格式化为所需格式 |
| | | return date.format("YYYY-MM-DD HH:mm"); |
| | | const date = moment(row.examinationDate, "YYYY-MM-DD HH:mm:ss"); |
| | | return date.isValid() ? date.format("YYYY-MM-DD HH:mm") : "无效日期"; |
| | | }, |
| | | |
| | | handleSelectionChange(val) { |
| | | console.log(val); |
| | | if (val.length > 1) { |
| | | let del_row = val.shift(); |
| | | this.$refs.tb.toggleRowSelection(del_row, false); //设置这一行取消选中 |
| | | } |
| | | // console.log(val, 999); |
| | | |
| | | |
| | | if (val.length > 0) { |
| | | const selectedRow = val[0]; |
| | | // console.log(val[0], 555); |
| | | /* if (!selectedRow.mzh) { |
| | | this.$refs.tb.toggleRowSelection(selectedRow, false); |
| | | this.$message.warning("当前行无有效门诊号,不能选中"); |
| | | return; |
| | | } */ |
| | | |
| | | this.selectedFirstTable = selectedRow; |
| | | console.log("当前选中的行数据:", this.selectedFirstTable); |
| | | |
| | | this.selectedFirstTable = val; |
| | | |
| | | const code = this.queryParams.tjNum; |
| | | if (!code) { |
| | | this.$message.warning("体检号不能为空!"); |
| | | return; // 直接返回,避免继续执行请求 |
| | | return; |
| | | } |
| | | this.loading = true; |
| | | getRightList(code).then((response) => { |
| | | this.checkList = response.data; |
| | | this.loading = false; |
| | | }); |
| | | // this.fetchRightTableData(selectedRow); |
| | | } else { |
| | | this.selectedFirstTable = null; |
| | | this.checkList = []; |
| | | } |
| | | }, |
| | | // 根据选中的行数据请求右边表格数据 |
| | | |
| | | fetchRightTableData(selectedRow) { |
| | | const code = this.queryParams.tjNum; |
| | | // const code = selectedRow.mzh; |
| | | // if (!code) return; |
| | | |
| | | this.loading = true; |
| | | getRightList(code).then((response) => { |
| | | this.checkList = response.data; |
| | | this.loading = false; |
| | | }); |
| | | }, |
| | | |
| | | fetchRightTableData() { |
| | | const code = this.queryParams.tjNum; |
| | | if (!code) { |
| | | console.warn('未提供体检号,跳过 fetchRightTableData'); |
| | | this.checkList = []; |
| | | this.loading = false; |
| | | return Promise.resolve(); |
| | | } |
| | | this.loading = true; |
| | | return getRightList(code) |
| | | .then((response) => { |
| | | this.checkList = response.data || []; |
| | | this.loading = false; |
| | | }) |
| | | .catch((error) => { |
| | | console.error('获取 checkList 失败:', error); |
| | | this.checkList = []; |
| | | this.loading = false; |
| | | throw error; |
| | | }); |
| | | }, |
| | | |
| | |
| | | this.selectedSecondTable = selectedRows; |
| | | if (selectedRows.length > 1) { |
| | | let del_row = selectedRows.shift(); |
| | | this.$refs.tab1.toggleRowSelection(del_row, false); //设置这一行取消选中 |
| | | this.$refs.tab1.toggleRowSelection(del_row, false); |
| | | } |
| | | console.log("当前选中的行数据:", this.selectedSecondTable); |
| | | |
| | | }, |
| | | getList() { |
| | | |
| | | async handleQuery() { |
| | | if (!this.queryParams.tjNum) { |
| | | this.$message.error("体检号不能为空"); |
| | | return; |
| | | } |
| | | |
| | | this.loading = true; |
| | | try { |
| | | const [orderResponse, leftResponse] = await Promise.all([ |
| | | getOrderList(this.queryParams).catch((error) => { |
| | | console.error('获取 orderList 失败:', error); |
| | | return { data: { list: [] } }; |
| | | }), |
| | | getLeftList(this.queryParams), |
| | | ]); |
| | | |
| | | if (orderResponse.data?.list?.length > 0) { |
| | | this.infoList = orderResponse.data.list[0]; |
| | | } else { |
| | | this.infoList = {}; |
| | | console.warn('getOrderList 返回空列表'); |
| | | } |
| | | |
| | | if (leftResponse.code === 200) { |
| | | this.exaLists = leftResponse.data.map((item, index) => ({ |
| | | ...item, |
| | | brid: item.brid?.trim(), |
| | | mzh: item.mzh?.trim(), |
| | | tempId: index, |
| | | })); |
| | | |
| | | await this.fetchRightTableData(); |
| | | } else { |
| | | this.exaLists = []; |
| | | this.$message.error(leftResponse.msg || "查询检查记录失败"); |
| | | } |
| | | } catch (error) { |
| | | console.error('查询失败:', error); |
| | | this.$message.error(error?.msg || "查询失败,请稍后重试"); |
| | | this.exaLists = []; |
| | | this.checkList = []; |
| | | this.infoList = {}; |
| | | } finally { |
| | | this.loading = false; |
| | | } |
| | | |
| | | if (this.createTimeList) { |
| | | this.queryParams.start = this.createTimeList[0]; |
| | | this.queryParams.end = this.createTimeList[1]; |
| | | } else if (this.createTimeList == null) { |
| | | } else { |
| | | this.queryParams.start = null; |
| | | this.queryParams.end = null; |
| | | } |
| | | }, |
| | | |
| | | /** 搜索按钮操作 */ |
| | | handleQuery() { |
| | | // this.queryParams.page = 1; |
| | | this.loading = true; |
| | | getLeftList(this.queryParams) |
| | | .then((res) => { |
| | | console.log(res, 1111); |
| | | if (res.code == 200) { |
| | | this.loading = false; |
| | | this.exaLists = res.data; |
| | | // this.code = this.exaLists.mzh; |
| | | } |
| | | }) |
| | | .catch((error) => { |
| | | this.loading = false; |
| | | this.$message.error(res.msg || "查询失败,请稍后重试"); |
| | | }); |
| | | this.getList(); |
| | | }, |
| | | |
| | | /** 重置按钮操作 */ |
| | | resetQuery() { |
| | | this.createTimeList = []; |
| | | this.resetForm("queryForm"); |
| | |
| | | end: null, |
| | | tjNum: null, |
| | | }; |
| | | |
| | | // 清空其他依赖数据 |
| | | this.checkList = []; |
| | | this.exaLists = []; |
| | | this.infoList = {}; |
| | | }, |
| | | |
| | | handleCurrentChange(row) { |
| | | this.currentRow = row; |
| | | // console.log('当前选中的行:', row); |
| | | }, |
| | | |
| | | setTime() { |
| | | //设置定时器 |
| | | this.clearTimeSet = setInterval(() => { |
| | | this.$modal.closeLoading(); |
| | | }, 300000); |
| | |
| | | tongbu(row) { |
| | | this.$modal.loading("正在同步,请稍候..."); |
| | | this.setTime(); |
| | | // console.log(val, 66); |
| | | this.selectedFirstTable.tjnum = this.queryParams.tjNum; |
| | | |
| | | const requestData = { |
| | | pacs: this.selectedFirstTable, // 左侧表格选中数据 |
| | | pacs: this.selectedFirstTable.map((item) => ({ |
| | | ...item, |
| | | tjNum: this.queryParams.tjNum, |
| | | })),// 左侧表格选中数据 |
| | | tj: this.selectedSecondTable[0], // 右侧表格选中数据 |
| | | }; |
| | | |
| | | if (!this.selectedSecondTable || this.selectedSecondTable.length === 0) { |
| | | this.$message.error("至少选一条数据!"); |
| | | return; |
| | | } |
| | | |
| | | asyncPacs(requestData) |
| | | .then((res) => { |
| | | if (res.code == 200) { |
| | | this.fetchRightTableData(this.selectedFirstTable); |
| | | if (res.code === 200) { |
| | | this.fetchRightTableData(); |
| | | clearInterval(this.clearTimeSet); |
| | | this.clearTimeSet = null; |
| | | this.$modal.closeLoading(); |
| | |
| | | clearInterval(this.clearTimeSet); |
| | | this.clearTimeSet = null; |
| | | this.$modal.closeLoading(); |
| | | // this.$modal.error("操作失败,请稍后重试"); |
| | | this.$message.error("同步失败,请稍后重试"); |
| | | }); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | #ta .el-table__header-wrapper .el-checkbox { |
| | | display: none; |
| | | .app-container { |
| | | padding: 20px; |
| | | background: #f5f7fa; |
| | | } |
| | | |
| | | .table-header { |
| | | text-align: center; |
| | | background-color: #aad8df; |
| | | padding: 10px; |
| | | font-size: 16px; |
| | | font-weight: bold; |
| | | color: #333; |
| | | border-radius: 4px 4px 0 0; |
| | | margin: 10px 0 0 0; |
| | | /* 顶部间距保留,底部间距移除 */ |
| | | } |
| | | |
| | | .table-title { |
| | | text-align: center; |
| | | padding: 10px 0; |
| | | } |
| | | |
| | | .table-title.table-header h3 { |
| | | margin: 0; |
| | | font-weight: bold; |
| | | color: #333; |
| | | } |
| | | |
| | | .table-title h3 { |
| | | font-size: 16px; |
| | | color: #333; |
| | | margin: 0; |
| | | line-height: 1.5; |
| | | display: flex; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 20px; |
| | | } |
| | | |
| | | .table-title .highlight { |
| | | font-weight: bold; |
| | | color: #2c3e50; |
| | | } |
| | | |
| | | .el-table { |
| | | border-radius: 4px; |
| | | font-size: 14px; |
| | | } |
| | | |
| | | .el-table .warning-row { |
| | | background: #e5f3ff !important; |
| | | } |
| | | |
| | | ::v-deep .el-table__body tr.current-row > td { |
| | | background: #edf2fa !important; |
| | | } |
| | | |
| | | .table-title { |
| | | text-align: center; |
| | | margin-bottom: 15px; |
| | | } |
| | | .row-disabled { |
| | | color: #ccc; /* 设置禁用行的字体颜色 */ |
| | | pointer-events: none; /* 禁止鼠标操作 */ |
| | | background-color: #f5f5f5; /* 设置禁用行的背景色 */ |
| | | } |
| | | |
| | | .pag { |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | } |
| | | |
| | | .pag1 { |
| | | width: 30%; |
| | | color: #999; |
| | | background-color: #f5f5f5; |
| | | } |
| | | </style> |