|
|
@ -1,61 +1,38 @@ |
|
|
|
<template> |
|
|
|
<div class="patient-container"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="operater-box"> |
|
|
|
<div class="operater-title">选择患者</div> |
|
|
|
<div><a-button type="primary" icon="plus" @click="goCreate">新建患者</a-button></div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="patient-box"> |
|
|
|
<div class="patient-list-item"> |
|
|
|
<div class="search-box"> |
|
|
|
<a-input |
|
|
|
placeholder="姓名 (支持拼音、首拼、关键字)" |
|
|
|
style="width: 100%" |
|
|
|
size="large" |
|
|
|
v-model="searchVal" |
|
|
|
@pressEnter="onSearch" |
|
|
|
allowClear |
|
|
|
> |
|
|
|
<a-icon |
|
|
|
slot="prefix" |
|
|
|
type="search" |
|
|
|
@click="onSearch" |
|
|
|
/> |
|
|
|
<a-input placeholder="姓名 (支持拼音、首拼、关键字)" style="width: 100%" size="large" v-model="searchVal" |
|
|
|
@pressEnter="onSearch" allowClear> |
|
|
|
<a-icon slot="prefix" type="search" @click="onSearch" /> |
|
|
|
</a-input> |
|
|
|
</div> |
|
|
|
<patient-list ref="patientList" @change="changeComponent" :column="1"></patient-list> |
|
|
|
</div> |
|
|
|
<div class="patient-detail"> |
|
|
|
<patient-detail ref="patientList" |
|
|
|
:firstAidData="firstAidData" |
|
|
|
:carList="carList" |
|
|
|
:carNo="carNo" @change="changeComponent" ></patient-detail> |
|
|
|
<patient-detail ref="patientList" :firstAidData="firstAidData" :carList="carList" :carNo="carNo" |
|
|
|
@change="changeComponent"></patient-detail> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<PatientCreate |
|
|
|
ref="patientCreate" |
|
|
|
@on-success="onSearch" |
|
|
|
:firstAidData="firstAidData" |
|
|
|
:carList="carList" |
|
|
|
:carNo="carNo" |
|
|
|
/> |
|
|
|
|
|
|
|
<PatientCreate ref="patientCreate" @on-success="onSearch" :firstAidData="firstAidData" :carList="carList" |
|
|
|
:carNo="carNo" /> |
|
|
|
<!-- 平车状态按钮 --> |
|
|
|
<Dragger ref="pc" class="pc-dragger"> |
|
|
|
<img src="@/assets/images/pc.png" alt="" @click="pcVisible = true" /> |
|
|
|
</Dragger> |
|
|
|
<!-- 平车弹窗 --> |
|
|
|
<a-modal |
|
|
|
:width="700" |
|
|
|
:destroyOnClose="true" |
|
|
|
v-model="pcVisible" |
|
|
|
@ok="pcVisible = false" |
|
|
|
:footer="null" |
|
|
|
> |
|
|
|
<a-modal :width="700" :destroyOnClose="true" v-model="pcVisible" @ok="pcVisible = false" :footer="null"> |
|
|
|
<div class="pc-container"> |
|
|
|
<div class="pc-no"> |
|
|
|
<div class="pc-num">{{ pcData.carNo }}</div> |
|
|
@ -114,33 +91,16 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="pc-list"> |
|
|
|
<a-button |
|
|
|
v-for="(item, index) in mqttBut" |
|
|
|
:key="index" |
|
|
|
class="mr-2" |
|
|
|
@click="handleMqtt(index + 1)" |
|
|
|
>{{ item }}</a-button |
|
|
|
> |
|
|
|
<a-button v-for="(item, index) in mqttBut" :key="index" class="mr-2" |
|
|
|
@click="handleMqtt(index + 1)">{{ item }}</a-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</a-modal> |
|
|
|
|
|
|
|
|
|
|
|
<a-modal |
|
|
|
class="patient-create patient-form" |
|
|
|
:width="600" |
|
|
|
:destroyOnClose="true" |
|
|
|
v-model="mqttShow" |
|
|
|
@ok="pcVisible = false" |
|
|
|
:footer="null" |
|
|
|
:title="mqttBut[form.type - 1]" |
|
|
|
> |
|
|
|
<a-form |
|
|
|
class="div-form" |
|
|
|
:form="form" |
|
|
|
:label-col="{ span: 5 }" |
|
|
|
:wrapper-col="{ span: 18 }" |
|
|
|
> |
|
|
|
|
|
|
|
|
|
|
|
<a-modal class="patient-create patient-form" :width="600" :destroyOnClose="true" v-model="mqttShow" |
|
|
|
@ok="pcVisible = false" :footer="null" :title="mqttBut[form.type - 1]"> |
|
|
|
<a-form class="div-form" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }"> |
|
|
|
<a-form-item label="设备编号"> |
|
|
|
<a-input v-model="form.deviceNo" /> |
|
|
|
</a-form-item> |
|
|
@ -148,12 +108,7 @@ |
|
|
|
<div v-if="form.type == 1"> |
|
|
|
<a-form-item label="时间"> |
|
|
|
<!-- <a-input v-model="form.time" /> --> |
|
|
|
<a-date-picker |
|
|
|
class="div-picker" |
|
|
|
@change="onChange" |
|
|
|
show-time |
|
|
|
format="YYYY-MM-DD HH:mm:ss" |
|
|
|
> |
|
|
|
<a-date-picker class="div-picker" @change="onChange" show-time format="YYYY-MM-DD HH:mm:ss"> |
|
|
|
<template slot="renderExtraFooter"> </template> |
|
|
|
</a-date-picker> |
|
|
|
</a-form-item> |
|
|
@ -191,10 +146,7 @@ |
|
|
|
</a-form-item> |
|
|
|
</div> |
|
|
|
<a-form-item :wrapper-col="{ span: 12, offset: 5 }"> |
|
|
|
<a-button |
|
|
|
type="primary" |
|
|
|
@click="handleMqttSubmit(form.type)" |
|
|
|
> |
|
|
|
<a-button type="primary" @click="handleMqttSubmit(form.type)"> |
|
|
|
确认 |
|
|
|
</a-button> |
|
|
|
</a-form-item> |
|
|
@ -204,225 +156,272 @@ |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import { mapState, mapActions, mapMutations } from 'vuex'; |
|
|
|
import PatientCreate from './components/patient-create.vue'; |
|
|
|
import PatientList from './components/patient-list.vue'; |
|
|
|
import PatientDetail from './components/patient-detail.vue'; |
|
|
|
import Dragger from '@/components/dragger.vue'; |
|
|
|
import { |
|
|
|
getNation, |
|
|
|
queryByPadNo, |
|
|
|
selectList, |
|
|
|
remoteTime, |
|
|
|
remoteWeightCalibration, |
|
|
|
remoteKljCapacity, |
|
|
|
remoteAuth, |
|
|
|
remoteReboot, |
|
|
|
remoteRfid, |
|
|
|
queryVideo, |
|
|
|
queryBook, |
|
|
|
messageQuery |
|
|
|
} from 'api/index.js'; |
|
|
|
export default { |
|
|
|
name: 'Index', |
|
|
|
components: { |
|
|
|
PatientCreate, |
|
|
|
PatientList, |
|
|
|
PatientDetail, |
|
|
|
Dragger |
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchVal: '', // 搜索字段 |
|
|
|
carList: [], // 平车列表 |
|
|
|
carNo: '', // 平车号 |
|
|
|
firstAidData: {}, |
|
|
|
nationList: [], // 民族数据 |
|
|
|
pcData: "", // 平板绑定平车数据 |
|
|
|
component: "", // 页面内容 |
|
|
|
form: {}, |
|
|
|
pcVisible: false, |
|
|
|
mqttShow: false, |
|
|
|
mqttBut: [ |
|
|
|
'校时', |
|
|
|
'称重校准', |
|
|
|
'电池容量', |
|
|
|
'按键授权', |
|
|
|
'设备重启', |
|
|
|
'远程RFID', |
|
|
|
], |
|
|
|
} |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState('patient', ['patientData', 'timerData']), |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
this.getSelectList(); |
|
|
|
this.getNation(); |
|
|
|
this.queryByPadNo(); |
|
|
|
this.queryVideo(); //视频 |
|
|
|
this.queryBook(); //知情同意 |
|
|
|
this.getMessageQuery(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapMutations('storm', ['setNationList']), |
|
|
|
...mapMutations('patient', [ |
|
|
|
'setPatientData', |
|
|
|
'setTimerData', |
|
|
|
'setVideo', |
|
|
|
'setBook', |
|
|
|
]), |
|
|
|
//搜索 |
|
|
|
onSearch(data) { |
|
|
|
this.$refs.patientList.getData(1, this.searchVal, 'search') |
|
|
|
}, |
|
|
|
onChange(value, dateString) { |
|
|
|
this.form.time = dateString; |
|
|
|
console.log('Formatted Selected Time: ', dateString); |
|
|
|
}, |
|
|
|
//创建患者 |
|
|
|
async goCreate() { |
|
|
|
this.$refs.patientCreate.open(); |
|
|
|
await this.home.getRouter(-1); |
|
|
|
import { |
|
|
|
mapState, |
|
|
|
mapActions, |
|
|
|
mapMutations |
|
|
|
} from 'vuex'; |
|
|
|
import PatientCreate from './components/patient-create.vue'; |
|
|
|
import PatientList from './components/patient-list.vue'; |
|
|
|
import PatientDetail from './components/patient-detail.vue'; |
|
|
|
import Dragger from '@/components/dragger.vue'; |
|
|
|
import { |
|
|
|
getNation, |
|
|
|
queryByPadNo, |
|
|
|
selectList, |
|
|
|
remoteTime, |
|
|
|
remoteWeightCalibration, |
|
|
|
remoteKljCapacity, |
|
|
|
remoteAuth, |
|
|
|
remoteReboot, |
|
|
|
remoteRfid, |
|
|
|
queryVideo, |
|
|
|
queryBook, |
|
|
|
messageQuery |
|
|
|
} from 'api/index.js'; |
|
|
|
export default { |
|
|
|
name: 'Index', |
|
|
|
components: { |
|
|
|
PatientCreate, |
|
|
|
PatientList, |
|
|
|
PatientDetail, |
|
|
|
Dragger |
|
|
|
}, |
|
|
|
// 查询平车、平板设备列表 |
|
|
|
async getSelectList() { |
|
|
|
let res = await selectList({ |
|
|
|
param: { |
|
|
|
deviceType: 0, |
|
|
|
}, |
|
|
|
}); |
|
|
|
const { data, code, msg } = res; |
|
|
|
if (code === 200) { |
|
|
|
this.carList = data.list; |
|
|
|
this.carNo = this.carList[0]?.deviceNo || ''; // 默认选中第一个平车 |
|
|
|
console.log('this.carNo ', this.carNo); |
|
|
|
data() { |
|
|
|
return { |
|
|
|
searchVal: '', // 搜索字段 |
|
|
|
carList: [], // 平车列表 |
|
|
|
carNo: '', // 平车号 |
|
|
|
firstAidData: {}, |
|
|
|
nationList: [], // 民族数据 |
|
|
|
pcData: "", // 平板绑定平车数据 |
|
|
|
component: "", // 页面内容 |
|
|
|
form: {}, |
|
|
|
pcVisible: false, |
|
|
|
mqttShow: false, |
|
|
|
mqttBut: [ |
|
|
|
'校时', |
|
|
|
'称重校准', |
|
|
|
'电池容量', |
|
|
|
'按键授权', |
|
|
|
'设备重启', |
|
|
|
'远程RFID', |
|
|
|
], |
|
|
|
} |
|
|
|
this.component = "patient-list" |
|
|
|
}, |
|
|
|
//获取民族数据 |
|
|
|
async getNation() { |
|
|
|
let res = await getNation(); |
|
|
|
const { data, code, msg } = res; |
|
|
|
if (code === 200) { |
|
|
|
this.nationList = data; |
|
|
|
this.setNationList(data); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取平板绑定数据 |
|
|
|
async queryByPadNo() { |
|
|
|
const res = await queryByPadNo(); |
|
|
|
const { data, code, msg } = res; |
|
|
|
if (code === 200) { |
|
|
|
this.pcData = data; |
|
|
|
} else { |
|
|
|
this.$message.error('平板未绑定平车'); |
|
|
|
} |
|
|
|
computed: { |
|
|
|
...mapState('patient', ['patientData', 'timerData']), |
|
|
|
}, |
|
|
|
// 查看患者详情 |
|
|
|
changeComponent(c){ |
|
|
|
this.component = c |
|
|
|
}, |
|
|
|
|
|
|
|
async handleMqttSubmit(type) { |
|
|
|
let formData = JSON.parse(JSON.stringify(this.form)); |
|
|
|
delete formData.type; |
|
|
|
let res = {}; |
|
|
|
if (type == 1) { |
|
|
|
res = await remoteTime(formData); |
|
|
|
} else if (type == 2) { |
|
|
|
res = await remoteWeightCalibration(formData); |
|
|
|
} else if (type == 3) { |
|
|
|
res = await remoteKljCapacity(formData); |
|
|
|
} else if (type == 4) { |
|
|
|
res = await remoteAuth(formData); |
|
|
|
} else if (type == 5) { |
|
|
|
res = await remoteReboot(formData); |
|
|
|
} else if (type == 6) { |
|
|
|
res = await remoteRfid(formData); |
|
|
|
} |
|
|
|
const { code, msg, data } = res; |
|
|
|
if (code === 200) { |
|
|
|
this.mqttShow = false; |
|
|
|
this.$message.success('操作成功'); |
|
|
|
} else { |
|
|
|
this.$message.error(msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleMqtt(type) { |
|
|
|
this.form = {}; |
|
|
|
let deviceNo = this.pcData.carNo; |
|
|
|
const formStructures = { |
|
|
|
1: { time: '' }, // 校时 |
|
|
|
2: { index: '', kg: '' }, // 称重校准 |
|
|
|
3: { capacity: '' }, // 电池电量 |
|
|
|
4: { needAuthFlag: '' }, // 按键授权 |
|
|
|
5: {}, // 设备重启 |
|
|
|
6: { rfidNo: '' }, // rfid |
|
|
|
}; |
|
|
|
this.form = { |
|
|
|
type, |
|
|
|
...formStructures[type], |
|
|
|
deviceNo, |
|
|
|
}; |
|
|
|
this.mqttShow = true; |
|
|
|
}, |
|
|
|
|
|
|
|
async queryVideo() { |
|
|
|
let res = await queryVideo(); |
|
|
|
const { data, code, msg } = res; |
|
|
|
if (code === 200) { |
|
|
|
this.setVideo(data.list); |
|
|
|
} |
|
|
|
}, |
|
|
|
async queryBook() { |
|
|
|
let res = await queryBook(); |
|
|
|
const { data, code, msg } = res; |
|
|
|
console.log(data) |
|
|
|
if (code === 200) { |
|
|
|
this.setBook(data); |
|
|
|
} |
|
|
|
}, |
|
|
|
async getMessageQuery() { |
|
|
|
const { firstAidId } = this.patientData; |
|
|
|
const res = await messageQuery(firstAidId); |
|
|
|
const { code, msg } = res; |
|
|
|
if (code === 200) { |
|
|
|
this.setTimerData(res.data); |
|
|
|
} |
|
|
|
mounted() { |
|
|
|
this.getSelectList(); |
|
|
|
this.getNation(); |
|
|
|
this.queryByPadNo(); |
|
|
|
this.queryVideo(); //视频 |
|
|
|
this.queryBook(); //知情同意 |
|
|
|
this.getMessageQuery(); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
...mapMutations('storm', ['setNationList']), |
|
|
|
...mapMutations('patient', [ |
|
|
|
'setPatientData', |
|
|
|
'setTimerData', |
|
|
|
'setVideo', |
|
|
|
'setBook', |
|
|
|
]), |
|
|
|
//搜索 |
|
|
|
onSearch(data) { |
|
|
|
this.$refs.patientList.getData(1, this.searchVal, 'search') |
|
|
|
}, |
|
|
|
onChange(value, dateString) { |
|
|
|
this.form.time = dateString; |
|
|
|
console.log('Formatted Selected Time: ', dateString); |
|
|
|
}, |
|
|
|
//创建患者 |
|
|
|
async goCreate() { |
|
|
|
this.$refs.patientCreate.open(); |
|
|
|
await this.home.getRouter(-1); |
|
|
|
}, |
|
|
|
// 查询平车、平板设备列表 |
|
|
|
async getSelectList() { |
|
|
|
let res = await selectList({ |
|
|
|
param: { |
|
|
|
deviceType: 0, |
|
|
|
}, |
|
|
|
}); |
|
|
|
const { |
|
|
|
data, |
|
|
|
code, |
|
|
|
msg |
|
|
|
} = res; |
|
|
|
if (code === 200) { |
|
|
|
this.carList = data.list; |
|
|
|
this.carNo = this.carList[0]?.deviceNo || ''; // 默认选中第一个平车 |
|
|
|
console.log('this.carNo ', this.carNo); |
|
|
|
} |
|
|
|
this.component = "patient-list" |
|
|
|
}, |
|
|
|
//获取民族数据 |
|
|
|
async getNation() { |
|
|
|
let res = await getNation(); |
|
|
|
const { |
|
|
|
data, |
|
|
|
code, |
|
|
|
msg |
|
|
|
} = res; |
|
|
|
if (code === 200) { |
|
|
|
this.nationList = data; |
|
|
|
this.setNationList(data); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 获取平板绑定数据 |
|
|
|
async queryByPadNo() { |
|
|
|
const res = await queryByPadNo(); |
|
|
|
const { |
|
|
|
data, |
|
|
|
code, |
|
|
|
msg |
|
|
|
} = res; |
|
|
|
if (code === 200) { |
|
|
|
this.pcData = data; |
|
|
|
} else { |
|
|
|
this.$message.error('平板未绑定平车'); |
|
|
|
} |
|
|
|
}, |
|
|
|
// 查看患者详情 |
|
|
|
changeComponent(item) { |
|
|
|
// this.component = c |
|
|
|
// this.firstAidData = item |
|
|
|
}, |
|
|
|
|
|
|
|
async handleMqttSubmit(type) { |
|
|
|
let formData = JSON.parse(JSON.stringify(this.form)); |
|
|
|
delete formData.type; |
|
|
|
let res = {}; |
|
|
|
if (type == 1) { |
|
|
|
res = await remoteTime(formData); |
|
|
|
} else if (type == 2) { |
|
|
|
res = await remoteWeightCalibration(formData); |
|
|
|
} else if (type == 3) { |
|
|
|
res = await remoteKljCapacity(formData); |
|
|
|
} else if (type == 4) { |
|
|
|
res = await remoteAuth(formData); |
|
|
|
} else if (type == 5) { |
|
|
|
res = await remoteReboot(formData); |
|
|
|
} else if (type == 6) { |
|
|
|
res = await remoteRfid(formData); |
|
|
|
} |
|
|
|
const { |
|
|
|
code, |
|
|
|
msg, |
|
|
|
data |
|
|
|
} = res; |
|
|
|
if (code === 200) { |
|
|
|
this.mqttShow = false; |
|
|
|
this.$message.success('操作成功'); |
|
|
|
} else { |
|
|
|
this.$message.error(msg); |
|
|
|
} |
|
|
|
}, |
|
|
|
handleMqtt(type) { |
|
|
|
this.form = {}; |
|
|
|
let deviceNo = this.pcData.carNo; |
|
|
|
const formStructures = { |
|
|
|
1: { |
|
|
|
time: '' |
|
|
|
}, // 校时 |
|
|
|
2: { |
|
|
|
index: '', |
|
|
|
kg: '' |
|
|
|
}, // 称重校准 |
|
|
|
3: { |
|
|
|
capacity: '' |
|
|
|
}, // 电池电量 |
|
|
|
4: { |
|
|
|
needAuthFlag: '' |
|
|
|
}, // 按键授权 |
|
|
|
5: {}, // 设备重启 |
|
|
|
6: { |
|
|
|
rfidNo: '' |
|
|
|
}, // rfid |
|
|
|
}; |
|
|
|
this.form = { |
|
|
|
type, |
|
|
|
...formStructures[type], |
|
|
|
deviceNo, |
|
|
|
}; |
|
|
|
this.mqttShow = true; |
|
|
|
}, |
|
|
|
|
|
|
|
async queryVideo() { |
|
|
|
let res = await queryVideo(); |
|
|
|
const { |
|
|
|
data, |
|
|
|
code, |
|
|
|
msg |
|
|
|
} = res; |
|
|
|
if (code === 200) { |
|
|
|
this.setVideo(data.list); |
|
|
|
} |
|
|
|
}, |
|
|
|
async queryBook() { |
|
|
|
let res = await queryBook(); |
|
|
|
const { |
|
|
|
data, |
|
|
|
code, |
|
|
|
msg |
|
|
|
} = res; |
|
|
|
console.log(data) |
|
|
|
if (code === 200) { |
|
|
|
this.setBook(data); |
|
|
|
} |
|
|
|
}, |
|
|
|
async getMessageQuery() { |
|
|
|
const { |
|
|
|
firstAidId |
|
|
|
} = this.patientData; |
|
|
|
const res = await messageQuery(firstAidId); |
|
|
|
const { |
|
|
|
code, |
|
|
|
msg |
|
|
|
} = res; |
|
|
|
if (code === 200) { |
|
|
|
this.setTimerData(res.data); |
|
|
|
} |
|
|
|
}, |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="less" scoped> |
|
|
|
.patient-container { |
|
|
|
// padding: 10px; |
|
|
|
|
|
|
|
|
|
|
|
// 搜索行样式 |
|
|
|
.search-box{ |
|
|
|
.search-box { |
|
|
|
margin-bottom: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 操作行样式 |
|
|
|
.operater-box{ |
|
|
|
.operater-box { |
|
|
|
padding: 0.5rem 1rem; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
width: 100%; |
|
|
|
background-color: #fff; |
|
|
|
margin-bottom: .2rem; |
|
|
|
.operater-title{ |
|
|
|
|
|
|
|
.operater-title { |
|
|
|
font-size: 1rem; |
|
|
|
font-weight: bold; |
|
|
|
line-height: 1.6rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.patient-box{ |
|
|
|
|
|
|
|
.patient-box { |
|
|
|
display: flex; |
|
|
|
background-color: #fff; |
|
|
|
.patient-list-item{ |
|
|
|
|
|
|
|
.patient-list-item { |
|
|
|
background-color: #fff; |
|
|
|
border-radius: 0.2rem; |
|
|
|
border-radius: 0.2rem; |
|
|
@ -431,56 +430,67 @@ export default { |
|
|
|
margin-right: 12px; |
|
|
|
padding: 12px; |
|
|
|
} |
|
|
|
.patient-detail{ |
|
|
|
|
|
|
|
.patient-detail { |
|
|
|
flex: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pc-dragger{ |
|
|
|
|
|
|
|
.pc-dragger { |
|
|
|
width: 3rem; |
|
|
|
height: 3rem; |
|
|
|
img{ |
|
|
|
|
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.pc-container { |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
.pc-no { |
|
|
|
font-size: 24px; |
|
|
|
font-weight: bold; |
|
|
|
font-family: OPPOSans-B; |
|
|
|
color: #3e3d4d; |
|
|
|
|
|
|
|
.status { |
|
|
|
font-size: 20px; |
|
|
|
font-family: OPPOSans-R; |
|
|
|
color: #70798c; |
|
|
|
padding-top: 10px; |
|
|
|
|
|
|
|
&.active { |
|
|
|
color: #7690e5; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.pc-list { |
|
|
|
padding: 30px 0; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
.pc-list-item { |
|
|
|
background: #f6f6f9; |
|
|
|
border-radius: 6px; |
|
|
|
padding: 6px 24px; |
|
|
|
font-size: 20px; |
|
|
|
|
|
|
|
&:not(:last-child) { |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.item-dash { |
|
|
|
width: 15px; |
|
|
|
height: 15px; |
|
|
|
border-radius: 50%; |
|
|
|
margin: 8px auto 5px; |
|
|
|
background: #3e3d4d; |
|
|
|
|
|
|
|
&.active { |
|
|
|
background: #7690e5; |
|
|
|
} |
|
|
|