• Day116.尚医通：预约挂号详情 ※

    目录

    一、预约挂号详情 ※

    1、接口实现 

    2、前端实现

    二、预约确认

    1、接口实现

    2、前端实现

    一、预约挂号详情 ※

    1、需求分析 

    (1) 根据page、limit、hoscode、depcode，带分页带条件查询信息

    (2) 根据hoscode、depcode、workDate 查询排班明细数据

    (3) 根据医院预约周期展现号源信息(失效)

    (4) 如果当天已过开始挂号时间，预约周期+1

    (5) 如果没有医生出诊的日期(放假)，也需要展示出来

    (6) 根据开始、停止挂号时间，判断状态

    2、接口分析

    1. 带分页带条件统计号源信息

    *参数：page、limit、hoscode、depcode

    *返回值：map

    2. 查询排班明细数据

    *参数：hoscode、depcode、workDate

    *返回值：list

    1、接口实现 

    1. controller

    HospitalApiController下新增方法

    1.     @ApiOperation(value = "获取可预约排班数据")
    2.     @GetMapping("auth/getBookingScheduleRule/{page}/{limit}/{hoscode}/{depcode}")
    3.     public R getBookingSchedule(
    4.             @PathVariable Integer page,
    5.             @PathVariable Integer limit,
    6.             @PathVariable String hoscode,
    7.             @PathVariable String depcode) {
    8.  
    9.         Map map = scheduleService.getBookingSchedule(page, limit, hoscode, depcode);
    10.         return R.ok().data(map);
    11.     }
    12.  
    13.     @ApiOperation(value = "获取排班数据")
    14.     @GetMapping("auth/findScheduleList/{hoscode}/{depcode}/{workDate}")
    15.     public R findScheduleList(
    16.             @PathVariable String hoscode,
    17.             @PathVariable String depcode,
    18.             @PathVariable String workDate) {
    19.         //方法复用
    20.         List scheduleList = scheduleService.getScheduleDetail(hoscode,depcode,workDate);
    21.         return R.ok().data("scheduleList",scheduleList);
    22.     }

    2. Service

    IPage：多传入一个总记录数，就可以算出总页数

    1.     //获取可预约排班数据
    2.     @Override
    3.     public Map getBookingSchedule(
    4.             Integer page, Integer limit, String hoscode, String depcode) {
    5.         //1.根据hoscode 查询医院信息，获取预约规则
    6.         //2.根据预约规则，分页信息，查询可预约日期的集合分页对象 (不受数据库影响，Ipage苞米豆)
    7.         //3.参考后台接口实现聚合查询 (List)
    8.         //4.合并 步骤2和步骤3的数据
    9.         //5.封装数据并返回
    10.         return null;
    11.     }
    1.     //获取可预约排班数据
    2.     @Override
    3.     public Map getBookingSchedule(
    4.             Integer page, Integer limit, String hoscode, String depcode) {
    5.         Map result = new HashMap<>();
    6.  
    7.         //1、根据hoscode 查询医院信息，获取预约规则
    8.         Hospital hospital = hospitalService.getHospital(hoscode);
    9.         if(hospital==null){
    10.             throw new YyghException(20001,"医院信息有误");
    11.         }
    12.         BookingRule bookingRule = hospital.getBookingRule();
    13.  
    14.         //2、根据预约规则，分页信息，查询可预约日期的集合分页对象 (不受数据库影响，Ipage苞米豆)
    15.         IPage iPage = this.getDateListPage(page,limit,bookingRule);
    16.         List datePageList = iPage.getRecords();
    17.  
    18.         //3、参考后台接口实现聚合查询 (List)，获取可预约日期科室剩余预约数
    19.         //3.1准备筛选条件
    20.         Criteria criteria = Criteria
    21.                 .where("hoscode").is(hoscode)
    22.                 .and("depcode").is(depcode)
    23.                 .and("workDate").in(datePageList);
    24.         //3.2创建聚合查询对象
    25.         Aggregation agg = Aggregation.newAggregation(
    26.                 //3.2.1设置查询条件
    27.                 Aggregation.match(criteria),
    28.                 //3.2.2设置聚合参数 + 聚合查询字段 (分组)
    29.                 Aggregation.group("workDate")
    30.                         .first("workDate").as("workDate")
    31.                         .count().as("docCount")
    32.                         .sum("reservedNumber").as("reservedNumber")
    33.                         .sum("availableNumber").as("availableNumber")
    34.         );
    35.  
    36.         //3.3执行聚合查询List
    37.         AggregationResults aggregate =
    38.                 mongoTemplate.aggregate(agg, Schedule.class, BookingScheduleRuleVo.class);
    39.         List scheduleVoList =
    40.                 aggregate.getMappedResults();
    41.  
    42.         //3.4转化查询结果的类型，List=>Map  k:workDate v:BookingScheduleRuleVo
    43.         Map scheduleVoMap = new HashMap<>();
    44.         if(!CollectionUtils.isEmpty(scheduleVoList)){
    45.             scheduleVoMap = scheduleVoList.stream().collect(Collectors.toMap(
    46.                     BookingScheduleRuleVo::getWorkDate,
    47.                     BookingScheduleRuleVo->BookingScheduleRuleVo
    48.             ));
    49.         }
    50.  
    51.         //4、合并 步骤2(datePageList)和步骤3(scheduleVoMap)的数据
    52.         List bookingScheduleRuleVoList = new ArrayList<>();
    53.  
    54.         for (int i = 0, let = datePageList.size(); i < let; i++) {
    55.             //4.1 遍历 datePageList，取出每一天日期
    56.             Date date = datePageList.get(i);
    57.             //4.2 根据日期，查询scheduleVoMap，获取排班聚合的记录信息
    58.             BookingScheduleRuleVo bookingScheduleRuleVo = scheduleVoMap.get(date);
    59.             //4.3 排班聚合的记录是空的，需要初始化
    60.             if(bookingScheduleRuleVo==null){
    61.                 bookingScheduleRuleVo = new BookingScheduleRuleVo();
    62.                 bookingScheduleRuleVo.setDocCount(0);//当前预约数
    63.                 bookingScheduleRuleVo.setAvailableNumber(-1);//
    64.             }
    65.             //4.4 设置排班日期
    66.             bookingScheduleRuleVo.setWorkDate(date);
    67.             bookingScheduleRuleVo.setWorkDateMd(date);
    68.  
    69.  
    70.             //4.5 根据日期换算周几
    71.             String dayOfWeek = this.getDayOfWeek(new DateTime(date));
    72.             bookingScheduleRuleVo.setDayOfWeek(dayOfWeek);
    73.  
    74.             //4.6 根据时间进行状态判断 (状态 0：正常 1：即将放号 -1：当天已停止挂号)
    75.             //最后一页，最后一条记录，状态为即将放号
    76.             if(i==let-1 && page==iPage.getPages()){
    77.                 bookingScheduleRuleVo.setStatus(1);
    78.             }else{
    79.                 bookingScheduleRuleVo.setStatus(0);
    80.             }
    81.             //第一页，第一条记录，如果已过停止挂号时间，状态为-1,当天停止挂号
    82.             if(i==0&&page==1){
    83.                 DateTime stopDateTime = this.getDateTime(new Date(), bookingRule.getStopTime());
    84.                 if(stopDateTime.isBeforeNow()){
    85.                     bookingScheduleRuleVo.setStatus(-1);
    86.                 }
    87.             }
    88.             bookingScheduleRuleVoList.add(bookingScheduleRuleVo);
    89.         }
    90.  
    91.         //5、封装数据并返回
    92.         //可预约日期规则数据
    93.         result.put("bookingScheduleList", bookingScheduleRuleVoList);
    94.         result.put("total", iPage.getTotal());
    95.         //其他基础数据
    96.         Map baseMap = new HashMap<>();
    97.         //医院名称
    98.         baseMap.put("hosname", hospitalService.getHospName(hoscode));
    99.         //科室
    100.         Department department =departmentService.getDepartment(hoscode, depcode);
    101.         //大科室名称
    102.         baseMap.put("bigname", department.getBigname());
    103.         //科室名称
    104.         baseMap.put("depname", department.getDepname());
    105.         //月
    106.         baseMap.put("workDateString", new DateTime().toString("yyyy年MM月"));
    107.         //放号时间
    108.         baseMap.put("releaseTime", bookingRule.getReleaseTime());
    109.         //停号时间
    110.         baseMap.put("stopTime", bookingRule.getStopTime());
    111.         result.put("baseMap", baseMap);
    112.  
    113.         return result;
    114.     }
    1.     //分支2 :根据预约规则，分页信息，查询可预约日期的集合分页对象
    2.     private IPage getDateListPage(
    3.             Integer page, Integer limit, BookingRule bookingRule) {
    4.         //1.从预约规则中获取开始挂号的时间(当前系统日期+开始时间)
    5.         DateTime releaseDateTime =
    6.                 this.getDateTime(new Date(),bookingRule.getReleaseTime());
    7.  
    8.         // 2.从预约规则中获取周期，判断周期是否需要+1  如果当天放号时间已过，则预约周期后一天为即将放号时间，周期加1
    9.         Integer cycle = bookingRule.getCycle();
    10.         if(releaseDateTime.isBeforeNow()) cycle +=1;
    11.  
    12.         //3.根据周期推算出可以挂号的日期，存入集合(list)
    13.         List dateList = new ArrayList<>();
    14.         for (int i = 0; i < cycle; i++) {
    15.             //当前日期向后i天
    16.             DateTime plusDays = new DateTime().plusDays(i);
    17.             String plusDaysString = plusDays.toString("yyyy-MM-dd");
    18.             dateList.add(new DateTime(plusDaysString).toDate());
    19.         }
    20.  
    21.         //4.准备分页参数  日期分页，由于预约周期不一样，页面一排最多显示7天数据，多了就要分页显示
    22.         int start = (page-1)*limit;
    23.         int end = (page-1)*limit+limit;
    24.         if(end>dateList.size()) end = dateList.size();
    25.  
    26.         //5.根据分页参数，获取分页后日期集合
    27.         List datePageList = new ArrayList<>();
    28.         for (int i = start; i < end; i++) {
    29.             datePageList.add(dateList.get(i));
    30.         }
    31.  
    32.         //6.封装数据到IPage对象，返回
    33.         IPage iPage = new com.baomidou.mybatisplus.extension.plugins.pagination.Page<>(page,limit,dateList.size());
    34.         iPage.setRecords(datePageList);
    35.         return iPage;
    36.     }
    37.  
    38.     //日期+开始时间
    39.     private DateTime getDateTime(Date date, String timeString) {
    40.         String dateTimeString = new DateTime(date)
    41.                 .toString("yyyy-MM-dd") + " "+ timeString;
    42.         DateTime dateTime = DateTimeFormat.forPattern("yyyy-MM-dd HH:mm").parseDateTime(dateTimeString);
    43.         return dateTime;
    44.     }

    3. 更新排班数据，测试：

    2、前端实现

    1. 页面分析创建页面入口

    2. 添加API

    1.     //获取可预约排班数据
    2.     getBookingScheduleList(page, limit, hoscode, depcode) {
    3.         return request({
    4.             url: `${api_name}/auth/getBookingScheduleRule/${page}/${limit}/${hoscode}/${depcode}`,
    5.             method: 'get'
    6.         })
    7.     },
    8.     //获取排班数据
    9.     findScheduleList(hoscode, depcode, workDate) {
    10.         return request({
    11.             url: `${api_name}/auth/findScheduleList/${hoscode}/${depcode}/${workDate}`,
    12.             method: 'get'
    13.         })
    14.     },

    3. 添加页面元素

    1. <template>
    2.     
    3.     <div class="nav-container page-component">
    4.         
    5.         <div class="nav left-nav">
    6.             <div class="nav-item selected">
    7.                 <span class="v-link selected dark" :onclick="'javascript:window.location=\'/hosp/'+hoscode+'\''">预约挂号
    8.                 span>
    9.             div>
    10.             <div class="nav-item ">
    11.                 <span class="v-link clickable dark"
    12.                     :onclick="'javascript:window.location=\'/hosp/detail/'+hoscode+'\''"> 医院详情 span>
    13.             div>
    14.             <div class="nav-item">
    15.                 <span class="v-link clickable dark"
    16.                     :onclick="'javascript:window.location=\'/hosp/notice/'+hoscode+'\''"> 预约须知 span>
    17.             div>
    18.             <div class="nav-item "><span class="v-link clickable dark"> 停诊信息 span>
    19.             div>
    20.             <div class="nav-item "><span class="v-link clickable dark"> 查询/取消 span>
    21.             div>
    22.         div>
    23.         
    24.         
    25.         <div class="page-container">
    26.             <div class="hospital-source-list">
    27.                 <div class="header-wrapper" style="justify-content:normal">
    28.                     <span class="v-link clickable" @click="show()">{{ baseMap.hosname}}span>
    29.                     <div class="split">div>
    30.                     <div>{{ baseMap.bigname }}div>
    31.                 div>
    32.                 <div class="title mt20"> {{ baseMap.depname }}div>
    33.                 
    34.                 <div class="mt60">
    35.                     <div class="title-wrapper">{{ baseMap.workDateString }}div>
    36.                     <div class="calendar-list-wrapper">
    37.                         
    38.                         
    39.                         <div :class="'calendar-item '+item.curClass" style="width: 124px;"
    40.                             v-for="(item, index) in bookingScheduleList" :key="item.id"
    41.                             @click="selectDate(item, index)">
    42.                             <div class="date-wrapper"><span>{{ item.workDate }}span><span class="week">{{
    43.                                     item.dayOfWeek }}span>div>
    44.                             <div class="status-wrapper" v-if="item.status == 0">{{ item.availableNumber == -1 ? '无号' :
    45.                                 item.availableNumber == 0 ? '约满' : '有号' }}div>
    46.                             <div class="status-wrapper" v-if="item.status == 1">即将放号div>
    47.                             <div class="status-wrapper" v-if="item.status == -1">停止挂号div>
    48.                         div>
    49.                     div>
    50.                     
    51.                     <el-pagination class="pagination" layout="prev, pager, next" :current-page="page" :total="total"
    52.                         :page-size="limit" @current-change="getPage">
    53.                     el-pagination>
    54.                 div>
    55.                 
    56.                 <div class="countdown-wrapper mt60" v-if="!tabShow">
    57.                     <div class="countdonw-title"> {{ time }}<span class="v-link selected">{{ baseMap.releaseTime }}
    58.                         span>放号div>
    59.                     <div class="countdown-text"> 倒 计 时
    60.                         <div>
    61.                             <span class="number">{{ timeString }}span>
    62.                         div>
    63.                     div>
    64.                 div>
    65.                 
    66.                 
    67.                 
    68.                 <div class="mt60" v-if="tabShow">
    69.                     <div class="">
    70.                         <div class="list-title">
    71.                             <div class="block">div>
    72.                             上午号源
    73.                         div>
    74.                         <div v-for="item in scheduleList" :key="item.id">
    75.                             <div class="list-item" v-if="item.workTime == 0">
    76.                                 <div class="item-wrapper">
    77.                                     <div class="title-wrapper">
    78.                                         <div class="title">{{ item.title }}div>
    79.                                         <div class="split">div>
    80.                                         <div class="name"> {{ item.docname }}div>
    81.                                     div>
    82.                                     <div class="special-wrapper">{{ item.skill }}div>
    83.                                 div>
    84.                                 <div class="right-wrapper">
    85.                                     <div class="fee"> ￥{{ item.amount }}
    86.                                     div>
    87.                                     <div class="button-wrapper">
    88.                                         <div class="v-button" @click="booking(item.id, item.availableNumber)"
    89.                                             :style="item.availableNumber == 0 || pageFirstStatus == -1 ? 'background-color: #7f828b;' : ''">
    90.                                             <span>剩余<span class="number">{{ item.availableNumber }}span>span>
    91.                                         div>
    92.                                     div>
    93.                                 div>
    94.                             div>
    95.                         div>
    96.                     div>
    97.                 div>
    98.                 
    99.                 
    100.                 <div class="mt60" v-if="tabShow">
    101.                     <div class="">
    102.                         <div class="list-title">
    103.                             <div class="block">div>
    104.                             下午号源
    105.                         div>
    106.                         <div v-for="item in scheduleList" :key="item.id">
    107.                             <div class="list-item" v-if="item.workTime == 1">
    108.                                 <div class="item-wrapper">
    109.                                     <div class="title-wrapper">
    110.                                         <div class="title">{{ item.title }}div>
    111.                                         <div class="split">div>
    112.                                         <div class="name"> {{ item.docname }}div>
    113.                                     div>
    114.                                     <div class="special-wrapper">{{ item.skill }}div>
    115.                                 div>
    116.                                 <div class="right-wrapper">
    117.                                     <div class="fee"> ￥{{ item.amount }}
    118.                                     div>
    119.                                     <div class="button-wrapper">
    120.                                         <div class="v-button" @click="booking(item.id, item.availableNumber)"
    121.                                             :style="item.availableNumber == 0 || pageFirstStatus == -1 ? 'background-color: #7f828b;' : ''">
    122.                                             <span>剩余<span class="number">{{ item.availableNumber }}span>span>
    123.                                         div>
    124.                                     div>
    125.                                 div>
    126.                             div>
    127.                         div>
    128.                     div>
    129.                 div>
    130.                 
    131.             div>
    132.         div>
    133.         
    134.     div>
    135.     
    136. template>

    4. 添加JS方法

    5. 测试： 

    二、预约确认

    需求分析：

    （1）根据预约周期，展示可预约日期数据，按分页展示

    （2）选择日期展示当天可预约列表（该接口后台已经实现过）

    1、接口实现

    (1). 查询排班详情接口

    *参数：scheduleId

    *返回值：schedule

    (2). 登录用户，查询就诊人集合信息

    2. controller 

    ​​​​​​​HospitalApiController

    1.     @ApiOperation(value = "根据排班id获取排班数据")
    2.     @GetMapping("getSchedule/{id}")
    3.     public R getSchedule(@PathVariable String id) {
    4.         Schedule schedule = scheduleService.findScheduleById(id);
    5.         return R.ok().data("schedule",schedule);
    6.     }

    3. service 

    1.     //根据排班id获取排班数据
    2.     @Override
    3.     public Schedule findScheduleById(String id) {
    4.         Schedule schedule = scheduleRepository.findById(id).get();
    5.         return this.packageSchedule(schedule);//翻译字段返回
    6.     }

    2、前端实现

    1. 确认入口，创建页面

    2. hospital 添加API

    1.     //根据排班id获取排班数据
    2.     getSchedule(id) {
    3.         return request({
    4.             url: `${api_name}/getSchedule/${id}`,
    5.             method: 'get'
    6.         })
    7.     }

     3. 添加页面

    1. <template>
    2.     
    3.     <div class="nav-container page-component">
    4.         
    5.         <div class="nav left-nav">
    6.             <div class="nav-item selected">
    7.                 <span class="v-link selected dark"
    8.                     :onclick="'javascript:window.location=\'/hospital/'+schedule.hoscode+'\''">预约挂号 span>
    9.             div>
    10.             <div class="nav-item ">
    11.                 <span class="v-link clickable dark"
    12.                     :onclick="'javascript:window.location=\'/hospital/detail/'+schedule.hoscode+'\''"> 医院详情 span>
    13.             div>
    14.             <div class="nav-item">
    15.                 <span class="v-link clickable dark"
    16.                     :onclick="'javascript:window.location=\'/hospital/notice/'+schedule.hoscode+'\''"> 预约须知 span>
    17.             div>
    18.             <div class="nav-item "><span class="v-link clickable dark"> 停诊信息 span>
    19.             div>
    20.             <div class="nav-item "><span class="v-link clickable dark"> 查询/取消 span>
    21.             div>
    22.         div>
    23.         
    24.  
    25.         
    26.         <div class="page-container">
    27.             <div class="hospital-order">
    28.                 <div class="header-wrapper">
    29.                     <div class="title mt20"> 确认挂号信息div>
    30.                     <div>
    31.                         <div class="sub-title">
    32.                             <div class="block">div>
    33.                             选择就诊人：
    34.                         div>
    35.                         <div class="patient-wrapper">
    36.                             <div>
    37.                                 <div class="v-card clickable item ">
    38.                                     <div class="inline" v-for="(item,index) in patientList" :key="item.id"
    39.                                         @click="selectPatient(index)" style="margin-right: 10px;">
    40.                                         
    41.                                         <div :class="activeIndex == index ? 'item-wrapper selected' : 'item-wrapper'">
    42.                                             <div>
    43.                                                 <div class="item-title">{{ item.name }}div>
    44.                                                 <div>{{ item.param.certificatesTypeString }}div>
    45.                                                 <div>{{ item.certificatesNo }}div>
    46.                                             div>
    47.                                             <img src="//img.114yygh.com/static/web/checked.png" class="checked">
    48.                                         div>
    49.                                     div>
    50.                                 div>
    51.                             div>
    52.                             <div class="item space add-patient v-card clickable">
    53.                                 <div class="">
    54.                                     <div class="item-add-wrapper" @click="addPatient()"> +
    55.                                         添加就诊人
    56.                                     div>
    57.                                 div>
    58.                             div>
    59.                             <div class="el-loading-mask" style="display: none;">
    60.                                 <div class="el-loading-spinner">
    61.                                     <svg viewBox="25 25 50 50" class="circular">
    62.                                         <circle cx="50" cy="50" r="20" fill="none" class="path">circle>
    63.                                     svg>
    64.                                 div>
    65.                             div>
    66.                         div>
    67.                         
    68.                         <div class="sub-title" v-if="patientList.length > 0">
    69.                             <div class="block">div>
    70.                             选择就诊卡： <span class="card-tips"><span class="iconfont">span>
    71.                                 如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销span>
    72.                         div>
    73.  
    74.                         <el-card class="patient-card" shadow="always" v-if="patientList.length > 0">
    75.                             <div slot="header" class="clearfix">
    76.                                 <div><span class="name"> {{ patient.name }} {{ patient.certificatesNo }} 居民身份证span>
    77.                                 div>
    78.                             div>
    79.                             <div class="card SELF_PAY_CARD">
    80.                                 <div class="info"><span class="type">{{ patient.isInsure == 0 ? '自费' :
    81.                                         '医保'}}span><span class="card-no">{{ patient.certificatesNo }}span><span
    82.                                         class="card-view">居民身份证span>div>
    83.                                 <span class="operate">span>
    84.                             div>
    85.                             <div class="card">
    86.                                 <div class="text bind-card">div>
    87.                             div>
    88.                         el-card>
    89.  
    90.                         <div class="sub-title">
    91.                             <div class="block">div>
    92.                             挂号信息
    93.                         div>
    94.                         <div class="content-wrapper">
    95.                             <el-form ref="form">
    96.                                 <el-form-item label="就诊日期：">
    97.                                     <div class="content"><span>{{ schedule.workDate }} {{ schedule.param.dayOfWeek }} {{
    98.                                             schedule.workTime == 0 ? '上午' : '下午' }}span>div>
    99.                                 el-form-item>
    100.                                 <el-form-item label="就诊医院：">
    101.                                     <div class="content"><span>{{ schedule.param.hosname }} span>div>
    102.                                 el-form-item>
    103.                                 <el-form-item label="就诊科室：">
    104.                                     <div class="content"><span>{{ schedule.param.depname }} span>div>
    105.                                 el-form-item>
    106.                                 <el-form-item label="医生姓名：">
    107.                                     <div class="content"><span>{{ schedule.docname }} span>div>
    108.                                 el-form-item>
    109.                                 <el-form-item label="医生职称：">
    110.                                     <div class="content"><span>{{ schedule.title }} span>div>
    111.                                 el-form-item>
    112.                                 <el-form-item label="医生专长：">
    113.                                     <div class="content"><span>{{ schedule.skill }}span>div>
    114.                                 el-form-item>
    115.                                 <el-form-item label="医事服务费：">
    116.                                     <div class="content">
    117.                                         <div class="fee">{{ schedule.amount }}元div>
    118.                                     div>
    119.                                 el-form-item>
    120.                             el-form>
    121.                         div>
    122.  
    123.                         
    124.                         <div>
    125.                             <div class="sub-title">
    126.                                 <div class="block">div>
    127.                                 用户信息
    128.                             div>
    129.                             <div class="content-wrapper">
    130.                                 <el-form ref="form" :model="form">
    131.                                     <el-form-item class="form-item" label="就诊人手机号：">
    132.                                         {{ patient.phone }}
    133.                                     el-form-item>
    134.                                 el-form>
    135.                             div>
    136.                         div>
    137.                         
    138.                         <div class="bottom-wrapper">
    139.                             <div class="button-wrapper">
    140.                                 <div class="v-button" @click="submitOrder()">{{ submitBnt }}div>
    141.                             div>
    142.                         div>
    143.                     div>
    144.                 div>
    145.             div>
    146.         div>
    147.         
    148.     div>
    149.     
    150. template>

    4. JS实现，CSS样式

    2. <style>
    3.     .hospital-order .header-wrapper {
    4.         display: -webkit-box;
    5.         display: -ms-flexbox;
    6.         display: block !important;
    7.         -webkit-box-align: center;
    8.         -ms-flex-align: center;
    9.         align-items: center;
    10.     }
    11.  
    12.     .hospital-order .sub-title {
    13.         letter-spacing: 1px;
    14.         color: #999;
    15.         margin-top: 60px;
    16.         display: -webkit-box;
    17.         display: -ms-flexbox;
    18.         display: flex;
    19.         -webkit-box-align: center;
    20.         -ms-flex-align: center;
    21.         align-items: center;
    22.     }
    23.  
    24.     .hospital-order .content-wrapper .content {
    25.         color: #333;
    26.     }
    27.  
    28.     .el-form-item {
    29.         margin-bottom: 5px;
    30.     }
    31.  
    32.     .hospital-order .content-wrapper {
    33.         margin-left: 140px;
    34.         margin-top: 20px;
    35.     }
    36. style>

    5. 测试

  • 相关阅读:
    IDEA绿色版本重装系统之后git远程仓出现的问题
    图像畸变与去畸变
    GB/T 29734.3-2020 塑钢复合门窗检测
    关于使用腾讯云HiFlow场景连接器每天提醒签到打卡
    【奇思妙想】【节省磁盘空间】我有一些文件，我不想移动它们，但又想节省磁盘空间，该怎么做呢？
    Java如何遍历HashSet呢？
    第9章_瑞萨MCU零基础入门系列教程之SCI I2C
    LINQ详解二（C#）
    内网IP端口提供外网连接访问？快解析动态域名与内网映射P2P穿透方案
    面试中常问到的C++11的题目和答案
  • 原文地址：https://blog.csdn.net/a111042555/article/details/126101414