com.kasite.client.uniapp.patient/pages/st1/business/tabbar/netHosIndex/netHosIndex.vue

<template>
  <view class="tabbar" :style="`padding-top:${statusBarHeight}px`">
    <view class="p_inner p_flexCenter">{{ pageTitle }}</view>
    <image class="p_back_img" mode="widthFix" :src="iconUrl.home_back_n"></image>
  </view>

  <view class="p_container" v-if="showCon" :style="`padding-top:${44 + statusBarHeight}px`">
    <view class="p_content" :class="{ 'p_bt200': !concerned }">
      <image class="p_back_img" mode="widthFix" :src="iconUrl.home_back_n"></image>
      <view class="home_con">
        <view class="p_search_con p_flexCenter">
          <input class="p_search_input" placeholder-class="p_placeholder" placeholder="搜索医生" type="text"
            @confirm="inputConfirm" v-model="searchVal" />
        </view>
        <view class="banner">
          <swiper class="swiper" @change="swiperChange" :autoplay="true" circular :interval="5000" :duration="1000">
            <swiper-item class="swiper_item" v-for="(item, ind) in bannerList" :key="ind" @click="bannerClkHandle"
              :data-item="item">
              <image class="banner_img" :src="item.ImgUrl"></image>
            </swiper-item>
          </swiper>
          <view class="dot_list p_flexCenter">
            <template v-for="(item, ind) in bannerList" :key="ind">
              <view class="dot_item" :class="{ 'dot_item_active': ind == bannerIndex }"></view>
            </template>
          </view>
        </view>
        <swiper v-if="false && msgList.length > 0" autoplay vertical circular :interval="6000" :duration="1000"
          class="message">
          <template>
            <template v-if="msgList.length > 0">
              <swiper-item class="p_flexCenter" v-for="(item, key) in msgList" :key="key">
                <view class="swiper_item_inner p_flexCenter">
                  <image class="msg_icon" :src="iconUrl.home_msg"></image>
                  <view class="msg_val">{{ item.backlogTipDiy }}</view>
                  <view class="msg_btn p_bgcolor p_flexCenter" @click="mesClick">去处理</view>
                </view>
              </swiper-item>
            </template>
            <swiper-item v-else class="swiper_item_inner p_flexCenter">
              <image class="msg_icon" :src="iconUrl.home_msg"></image>
              <view class="msg_val">暂无消息通知</view>
            </swiper-item>
          </template>
        </swiper>
        <view class="nav_line" @click="toDoctor" data-selected-type="xgzx" v-if="false">
          <image class="item_back" :src="iconUrl.home_xgzx_n"></image>
          <view class="item_tit" style="margin-bottom:25upx;">新冠在线咨询</view>
          <view class="item_subtit_v2 mb10">在线免费图文咨询</view>
          <view class="item_subtit_v2">权威医生在线解答</view>
          <view class="item_btn">
            点击咨询 <view class="right-arrow"></view>
          </view>
        </view>
        <view class="nav_list p_flexBetween">
          <view class="nav_item" @click="toDoctor" data-selected-type="twzx">
            <image class="item_back" :src="iconUrl.home_twzx_n"></image>
            <view class="item_tit_v2">图文咨询</view>
            <view class="item_subtit">
              <view>与医生本人</view>
              <view>在线图文沟通</view>
            </view>
          </view>
          <view class="nav_item nav_item_ask" @click="toDoctor" data-selected-type="spzx">
            <image class="item_back" :src="iconUrl.home_spzx_n"></image>
            <view class="item_tit">视频咨询</view>
            <view class="item_subtit">通过视频交流,高效直接更清楚</view>
          </view>
        </view>
      </view>
      <!-- 互联网服务 -->
      <view class="floot menuServices_box" v-if="menuObj?.Children?.[0]?.Children">
        <view class="floot_top displayFlexBetween">
          <view class="floot_title">
            <view class="floot_titleName">互联网服务</view>
          </view>
        </view>
        <view class="floot_lineFeed displayFlexBetween">
          <template v-for="(item, index) in menuObj.Children[0].Children" :key="index">
            <view class="floot_list menuList displayFlexCol" v-if="item.IsShow == '1'" :data-item="item"
              @click="menuClickFn">
              <image class="menuIcon" :src="item.Icon"></image>
              <text class="menuText">{{ item.MenuName }}</text>
            </view>
          </template>
        </view>
      </view>
      <view class="doctor_con" v-if="collectDocList.length > 0">
        <view class="nav menu_fifth_title p_flexBetween">
          <view class="displayFlexBetween">
            <text v-for="(item, index) in doctorTabbar" :key="index"
              :class="{ 'doctor_tabbar_active': doctorTabbarIndex == index }" :data-index="index"
              @click="choiceTabbar">{{ item }}</text>
          </view>
          <view class="nav_tip p_color_9 p_flexCenter" @click="contentClick" data-type="collectDocListMore">
            <text>更多</text>
            <image class="nav_img" :src="iconUrl.home_right"></image>
          </view>
        </view>
        <view class="doctor_swiper p_scroll">
          <view class="doctor_item p_flexCenter" v-if="doctorTabbarIndex == 0" v-for="(item, ind) in collectDocList"
            :key="ind" @click="toDoctorInfo" :data-item="item">
            <view class="p_doctor_img_con">
              <image class="p_doctor_img" :src="item.DoctorPhotourl"></image>
            </view>
            <view class="p_doctor_infocon">
              <view class="p_doctor_tit p_flexBetween">
                <view class="p_doctor_name p_lineClamp">{{ item.DoctorName }}</view>
                <view class="p_doctor_tip p_flexCenter">
                  <image class="p_doctor_star" :src="iconUrl.home_star"></image>
                  <text class="p_doctor_starval">{{ item.scoreDiy }}</text>
                </view>
              </view>
              <view class="p_doctor_info p_color_6 doctor_info">{{ item.LczcName }} {{ item.DeptName }}</view>
            </view>
          </view>
          <view class="displayFlexBetween" v-if="doctorTabbarIndex == 1" style="width: 100%">
            <template v-for="(item, index) in groupList" :key="index">
              <view class="menu_fifth_doctor_group displayFlexCol" v-if="index < 2" :data-item="item"
                @click="jumpGroupInfo">
                <image class="group_photo" :src="item.GroupUrl" mode="" />
                <view class="group_name displayFlexRow backgroundCustom">
                  <text>{{ item.GroupName }}</text>
                </view>
              </view>
            </template>
          </view>
        </view>
      </view>
      <view class="recommendDoc_con" v-if="doctorList.length > 0">
        <view class="nav p_flexBetween">
          <view class="nav_tit">名医推荐</view>
        </view>
        <view class="rec_inner">
          <view class="p_doctor_item p_flexCenter" v-for="(item, ind) in doctorList" :key="ind" @click="toDoctorInfo"
            :data-item="item">
            <view class="p_doctor_img_con">
              <image class="p_doctor_img" :src="item.DoctorPhotourl"></image>
            </view>
            <view class="p_doctor_item_con p_border_bottom">
              <view class="p_flexBetween">
                <view class="p_doctor_infocon">
                  <view class="p_doctor_tit">
                    <view class="p_doctor_name">{{ item.DoctorName }}</view>
                    <view class="p_doctor_tip p_flexCenter">
                      <image class="p_doctor_star" :src="iconUrl.home_star"></image>
                      <text class="p_doctor_starval">{{ item.scoreDiy }}</text>
                    </view>
                  </view>
                  <view class="p_doctor_info p_color_4d lineHeight">{{ item.TitleName }} {{ item.DeptName }}</view>
                </view>
                <view class="p_doctor_btn p_flexCenter">
                  <view class="p_color" style="position: relative;z-index: 1;font-weight: bold;">快速问诊</view>
                  <image class="p_doctor_btn_img" :src="iconUrl.home_tip_n"></image>
                </view>
              </view>
              <view class="p_doctor_item_introduce p_color_8a p_lineClamp lineHeight">
                擅长：{{ item.DoctorSkill }}
              </view>
              <view class="p_doctor_item_describe lineHeight">
                接诊量
                <text class="p_color font_bold">{{ item.ConsultAmount }}</text><text class="p_color_9"></text>
                好评率
                <text class="p_color font_bold">{{ item.percentage }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { useOnLoad, useIsToAuthPage, useDomain } from '@/hook';
import { common, menuClick } from '@/utils';
import icon from '@/utils/icon';
import { REQUEST_CONFIG } from '@/config';
import {
  queryConsultDeptList,
  queryRcmdConsultDoctorList,
  queryUserCollect,
  queryBackLogMsg,
  queryBDoctorList,
  queryConsultWaterList,
  queryArticleList,
  queryConsultDoctorGroup,
  saveConsultVisit
} from '../../../service/base';

const { proxy } = getCurrentInstance() as any;
const app = getApp();

// 响应式数据
const iconUrl = ref(icon);
const bannerList = ref<any[]>([]);
const bannerIndex = ref(0);
const doctorTabbar = ref(['关注的医生', '关注的团队']);
const doctorTabbarIndex = ref(0);
const groupList = ref<any[]>([]);
const deptList = ref<any[]>([]);
const doctorList = ref<any[]>([]);
const collectDocList = ref<any[]>([]);
const showCon = ref(false);
const msgList = ref<any[]>([]);
const searchVal = ref('');
const statusBarHeight = ref(20);
const pageTitle = ref('互联网医疗服务平台');
const menuObj = ref<any>({});
const concerned = ref(false);
const options = ref<any>({});

/** 页面初始加载 */
useOnLoad(async (loadOptions) => {
  options.value = loadOptions || {};
  deptList.value = [];
  if (useIsToAuthPage()) {
    return;
  }
  siteFn();
});

/** 切换tabbar */
const choiceTabbar = (e: any) => {
  const index = e.currentTarget?.dataset?.index;
  if (index == 1) {
    // 查询咨询医生组
    queryConsultDoctorGroupFn();
  }
  doctorTabbarIndex.value = index;
};

// 查询咨询医生组
const queryConsultDoctorGroupFn = async () => {
  const data = {
    IsMemberCollect: 1
  };
  let { resp, resData } = await queryConsultDoctorGroup(data);
  if (common.isNotEmpty(resp)) {
    groupList.value = resp;
  } else {
    groupList.value = [];
  }
};

onShow(() => {
  statusBarHeight.value = app.globalData.statusBarHeight || 20;
  showFn();
});

// 埋点
const siteFn = async () => {
  if (app.globalData.logSuccess) {
    saveConsultVisitFn('26');
  } else {
    app.siteCallBack = saveConsultVisitFn.bind(null, '26');
  }
};

const showFn = async () => {
  /**H5回跳后重新登录 */
  if (options.value.h5Login) {
    await app.main();
  }
  if (app.globalData.logSuccess) {
    main();
  } else {
    app.loginReadyCallBack = main;
  }
};

const main = async () => {
  // 深拷贝 否则影响morePage更多页面
  let menuObjData: any = {};
  const menuList = uni.getStorageSync('menuList');
  if (!common.isEmpty(menuList)) {
    menuObjData = common.deepCopy(menuList.filter((item: any) => item.MenuName == 'netHosPage')[0], {});
  }
  common.showLoading();
  queryConsultWaterListFn();
  let deptListData: any[] = [];
  let doctorListData: any[] = [];
  let collectDocListData: any[] = [];
  let msgListData: any[] = [];
  const requestOptions = {
    showLoading: false
  };
  // 查询推荐科室
  const deptListRequestData = {
    HosId: app.globalData.districtId || app.globalData.hosId,
    IsRcmd: '1'
  };
  const queryConsultDeptListPromise = queryConsultDeptList(deptListRequestData);
  // 查询推荐医生
  const queryRcmdConsultDoctorListPromise = queryRcmdConsultDoctorList(deptListRequestData);
  // 查询关注医生
  const collectData = {
    resourceType: '1'
  };
  const queryUserCollectPromise = queryUserCollect(collectData);
  const backLogData = {
    OpenId: uni.getStorageSync('openid'),
    BusinessId: '',
    BacklogType: '', //1咨询申请2咨询消息3随访消息4医患申请5日程计划
    ReadState: '1', //1未读 2已读
    UserType: '1', //1.就诊人，2.医生
    IsGroup: '1' //是否分组
  };
  const queryBackLogMsgPromise = queryBackLogMsg(backLogData);
  const [
    { resp: deptListResp },
    { resp: doctorListResp },
    { resp: collectListResp },
    { resp: backLogMsgResp }
  ] = await Promise.all([
    queryConsultDeptListPromise,
    queryRcmdConsultDoctorListPromise,
    queryUserCollectPromise,
    queryBackLogMsgPromise
  ]);
  getBannerImg();
  deptListData = deptListResp || [];
  doctorListData = doctorListResp || [];
  if (!common.isEmpty(backLogMsgResp)) {
    let filteredBackLog = backLogMsgResp.filter((item: any) => item.Status == '1');
    if (!common.isEmpty(filteredBackLog)) {
      filteredBackLog.map((item: any) => {
        const { msgKeyList } = app.globalData;
        if (msgKeyList) {
          for (let i of msgKeyList) {
            if (item.BacklogType == i.backlogType) {
              item.backlogTitleDiy = i.title;
              item.backlogTipDiy = i.content;
            }
          }
        }
      });
      msgListData = filteredBackLog;
    }
  }
  if (!common.isEmpty(collectListResp)) {
    const arr: string[] = [];
    for (let i = 0; i < collectListResp.length; i++) {
      arr.push(collectListResp[i].ResourceId);
    }
    const queryBDoctorListData = {
      DoctorUid: arr.join()
    };
    let { resp: collectDocListResp } = await queryBDoctorList(queryBDoctorListData);
    common.hideLoading();
    if (!common.isEmpty(collectDocListResp)) {
      collectDocListData = collectDocListResp;
    }
  } else {
    common.hideLoading();
  }
  menuObj.value = menuObjData;
  deptList.value = deptListData;
  doctorList.value = doctorListHandle(doctorListData);
  collectDocList.value = doctorListHandle(collectDocListData);
  showCon.value = true;
  msgList.value = msgListData;
  // 查询咨询医生组
  queryConsultDoctorGroupFn();
};

const queryConsultWaterListFn = async () => {
  const queryData = {
    ConsultStartDate: common.getDate(),
    ConsultEndDate: common.getDate(),
    ConsultStatus: '16'
  };
  let { resp, resData } = await queryConsultWaterList(queryData);
  if (!common.isEmpty(resp)) {
    common.showModal(
      `尊敬的患者，您已预约视频问诊，请点击该提示跳转到签到页面在就诊前30分钟完成在线签到`,
      () => {
        const item: any = {};
        item.Url = `/pagesNetHos/st1/business/enquire/enquireList/enquireList?consultType=2&pageType=2`;
        menuClick(item, proxy);
      },
      { cancelText: '取消', confirmText: '跳转' }
    );
  }
};

/**
 * 查询文章列表，获取轮播图
 */
const getBannerImg = async () => {
  /**首页轮播 */
  const data = {
    //0 新闻动态；1 通知公告；2 健康宣教；3 就诊指南；4 住院需知  62 首页banner
    TypeClass: 62,
    // 1已发布
    Status: 1,
    //1链接
    Type: 1
  };
  let { resp, resData } = await queryArticleList(data);
  let bannerListData: any[] = [];
  if (common.isNotEmpty(resp)) {
    const domain = useDomain();
    resp.forEach((item: any) => {
      if (item.ImgUrl && item.ImgUrl.indexOf('http') === -1) {
        item.ImgUrl = `${domain}${item.ImgUrl.substring(1).replace(/\/\//g, '/')}`;
      }
      // 兼容原代码中的 BigImgUrl 字段
      item.BigImgUrl = item.ImgUrl;
    });
    bannerListData = resp;
  }
  bannerList.value = bannerListData;
};

// 点击事件
const contentClick = (e: any) => {
  const { type } = e.currentTarget?.dataset || {};
  console.log(type,'type')
  let url: string | undefined;
  if (type == 'collectDocListMore') {
    // 点击更多关注医生
    url = `/pagesNetHos/st1/business/other/doctorLike/doctorLike`;
  }
  if (url) {
    const data = {
      Url: url
    };
    menuClick(data, proxy);
  }
};

// 前往医生列表
const toDoctor = (e: any) => {
  const { selectedType } = e.currentTarget?.dataset || {};
  let data: any;
  if (selectedType == 'zxxf') {
    // 在线续方
    data = { Url: `/pages/st1/business/continuation/continuationList/continuationList` };
  } else if (selectedType == 'xgzx') {
    // 新冠咨询
  } else {
    // twzx  spzx  图文咨询 视频咨询
    data = {
      Url: `/pagesNetHos/st1/business/doctor/doctorList/doctorList?selectedType=${selectedType}`
    };
  }
  if (data) {
    menuClick(data, proxy);
  }
};

// 前往医生详情
const toDoctorInfo = (e: any) => {
  const queryBean = common.stringify(e.currentTarget?.dataset?.item);
  const data = {
    Url: `/pagesNetHos/st1/business/doctor/doctorInfo/doctorInfo?queryBean=${queryBean}`
  };
  console.log(data,'data')
  menuClick(data, proxy);
};

// 搜索
const inputConfirm = (e: any) => {
  const value = e.detail.value;
  if (value) {
    const data = {
      Url: `/pagesNetHos/st1/business/doctor/doctorList/doctorList?searchValue=${value}`
    };
    menuClick(data, proxy);
    searchVal.value = '';
  }
};

// 轮播图更改
const swiperChange = (e: any) => {
  if (e.detail.source == 'touch') {
    bannerIndex.value = e.detail.current;
  }
};

// banner图片点击
const bannerClkHandle = async (e: any) => {
  return;
  /**需要判断就诊人 和公众号授权*/
  if (useIsToAuthPage()) {
    return;
  }
  const { item } = e.currentTarget?.dataset || {};
  if (item?.LinkUrl) {
    if (item.LinkUrl.indexOf('http') > -1) {
      common.goToUrl('/pages/st1/blue/business/h5/h5/h5?url=' + item.LinkUrl);
    } else {
      // 处理其他链接逻辑
      common.goToUrl(item.LinkUrl);
    }
  }
};

// 消息点击
const mesClick = () => {
  common.goToUrl(`/pages/st1/blue/business/tabbar/message/message`, {
    skipWay: 'reLaunch'
  });
};

// 添加埋点(互联网)
// type 26：患者端     27：医生端     28：患者端添加就诊人
const saveConsultVisitFn = (type: string) => {
  const data = {
    Type: type
  };
  saveConsultVisit(data);
};

// 处理医生返回值
const doctorListHandle = (list: any[]) => {
  if (common.isEmpty(list)) {
    return list;
  }
  const domain = useDomain();
  for (let i of list) {
    if (i.DoctorPhotourl) {
      if (i.DoctorPhotourl.indexOf('http') === -1) {
        i.DoctorPhotourl = `${domain}${i.DoctorPhotourl.replace(/\\/g, '/')}`;
      }
    } else {
      i.DoctorPhotourl = icon.equire_doctor;
    }
    // 计算价格
    i.phoneFeeDiy = i.PhoneFee ? common.centToYuan(i.PhoneFee).toFixed(2) : 0;
    i.videoFeeDiy = i.VideoFee ? common.centToYuan(i.VideoFee).toFixed(2) : 0;
    i.consultFeeDiy = i.ConsultFee ? common.centToYuan(i.ConsultFee).toFixed(2) : 0;

    let AvgAppraiseScore = '-';
    // 用于做排序判断
    let AvgAppraiseScoreTag = 0;
    if (i.AppraiseCount > 0 && i.AppraiseScore > 0) {
      AvgAppraiseScore = ((i.AppraiseScore / i.AppraiseCount / 5) * 100).toFixed(0) + '%';
      AvgAppraiseScoreTag = ((i.AppraiseScore / i.AppraiseCount / 5) * 100).toFixed(0);
    }
    i.AvgAppraiseScore = AvgAppraiseScore;
    i.AvgAppraiseScoreTag = AvgAppraiseScoreTag;

    // 计算好评率
    if (true) {
      const highCount =
        app.globalData.config.net_pageConfiguration_patient.currency_config.iniHighAppraiseCount +
        i.HighAppraiseCountCons;
      const totalCount =
        app.globalData.config.net_pageConfiguration_patient.currency_config.iniHighAppraiseCount +
        (i.AppraiseCount !== undefined ? i.AppraiseCount : i.AppraiseCountCons);
      const percentage = (highCount / totalCount) * 100;
      if (Number.isNaN(percentage)) {
        i.percentage = '100%';
      } else {
        i.percentage = Math.ceil(percentage) + '%';
      }
    }
    i.scoreDiy = '5.0';
    if (
      (i.AppraiseCount !== undefined ? i.AppraiseCount : i.AppraiseCountCons) &&
      (i.AppraiseScore !== undefined ? i.AppraiseScore : i.AppraiseScoreCons)
    ) {
      // 评分
      i.scoreDiy = (
        (i.AppraiseScore !== undefined ? i.AppraiseScore : i.AppraiseScoreCons) /
        (i.AppraiseCount !== undefined ? i.AppraiseCount : i.AppraiseCountCons)
      ).toFixed(1);
    }
    if (i.AppraiseRule) {
      try {
        i.AppraiseRule = JSON.parse(i.AppraiseRule);
      } catch (err) {
        console.log('i.AppraiseRule格式化失败');
      }
    }
    try {
      i.DoctorName = i.DoctorName.split('-')[0];
    } catch (err) {}
  }
  return list;
};

/** 跳转团队主页 */
const jumpGroupInfo = (e: any) => {
  const item = e.currentTarget?.dataset?.item;
  const url = `/pagesNetHos/st1/business/doctorGroup/doctorGroupInfo/doctorGroupInfo?groupId=${item.GroupId}`;
  common.goToUrl(url);
};

/**
 * 菜单点击
 */
const menuClickFn = (e: any) => {
  console.log(e);
  menuClick(e, proxy);
};
</script>

<style lang="scss" scoped>
.p_content {
  padding: 20upx 30upx 30upx;
}

.home_con {
  padding: 20upx 0 1px;
  margin-bottom: 30upx;
  overflow: hidden;
}

.banner {
  width: 100%;
  height: 240upx;
  position: relative;
  margin: 30upx 0;
}

.swiper {
  width: 100%;
  height: 100%;
}

.dot_list {
  position: absolute;
  left: 50%;
  bottom: 12upx;
  transform: translateX(-50%);
}

.dot_item {
  width: 6upx;
  height: 6upx;
  background: #ffffff;
  opacity: 0.8;
  margin-right: 8upx;
  border-radius: 50px;
}

.dot_item_active {
  width: 12upx;
}

.message {
  width: 100%;
  height: 110upx;
  background: rgba(242, 248, 255, 1);
  border-radius: 10upx;
  padding: 0 33upx;
  margin: 20upx 0;
  box-sizing: border-box;
}

.swiper_item_inner {
  width: 100%;
}

.banner_img {
  border-radius: 26upx;
}

.msg_icon {
  width: 44upx;
  height: 44upx;
  margin-right: 28upx;
  flex-shrink: 0;
}

.msg_val {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

.msg_btn {
  font-size: 26upx;
  width: 108upx;
  height: 52upx;
  border-radius: 8px;
  margin-left: 24upx;
  flex-shrink: 0;
}

.nav_list {
  margin: 20upx 0 0;
  flex-wrap: wrap;
}

.nav_item {
  width: 335upx;
  height: 192upx;
  padding: 30upx 32upx;
  position: relative;
  border-radius: 20upx;
}
.nav_item_n {
  margin-top: 20upx;
}
.nav_line {
  width: 100%;
  height: 360upx;
  padding: 30upx 32upx;
  position: relative;
  border-radius: 20upx;
}

.item_btn {
  padding: 8upx 16upx 8upx 21upx;
  border-radius: 50px;
  color: #fff;
  font-size: 32upx;
  position: absolute;
  bottom: 40upx;
  left: 32upx;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.right-arrow {
  width: 7px;
  height: 7px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg) translateY(0upx) translateX(-7upx);
  display: inline-block;
  align-items: center;
}

.item_back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.nav_item_ask {
  background: #31cf94;
}

.item_tit {
  font-size: 44upx;
  font-weight: 500;
  color: #ffffff;
  line-height: 1em;
  margin-bottom: 18upx;
  position: relative;
}

.item_tit_v2 {
  font-size: 40upx;
  font-weight: 500;
  color: #ffffff;
  line-height: 1em;
  margin-bottom: 18upx;
  position: relative;
}

.item_subtit {
  font-size: 28upx;
  font-family: PingFang SC;
  color: #ffffff;
  line-height: 36upx;
  opacity: 0.6;
  position: relative;
}

.item_subtit_v2 {
  font-size: 30upx;
  font-family: PingFang SC;
  color: #ffffff;
  line-height: 36upx;
  opacity: 0.6;
  position: relative;
}

.item_btn_ask {
  box-shadow: 0px 4upx 10upx 0px rgba(50, 207, 148, 0.8);
}

.btn_val {
  font-size: 24upx;
  font-weight: 500;
  color: #ffffff;
  margin-right: 8upx;
}

.btn_right {
  width: 12upx;
  height: 12upx;
}

.item_img {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 140upx;
  height: 132upx;
}

.doctor_con {
  margin-top: 20upx;
  background-color: #fff;
  overflow: hidden;
  border-radius: 24upx;
}

.doctor_con .nav {
  padding-bottom: 20upx;
}

.nav {
  padding: 34upx 30upx 40upx;
  line-height: 1em;
}

.nav_tit {
  font-size: 40upx;
  font-weight: 500;
}

.nav_img {
  width: 20upx;
  height: 20upx;
  margin-left: 8upx;
}

.menu_fifth_title {
  width: 100%;
}

.menu_fifth_title view:nth-child(1) {
  width: 50%;
  font-size: 30upx;
}

.menu_fifth_title view:nth-child(1) text {
  color: #666;
}

.menu_fifth_title view:nth-child(2) {
  font-size: 26upx;
}

.menu_fifth_title view:nth-child(2) text {
  margin-right: 10upx;
}

.doctor_tabbar_active {
  font-weight: bold;
  color: #333 !important;
}

.menu_fifth_doctor_group {
  width: 49%;
  border-radius: 20upx;
  overflow: hidden;
}

.group_photo {
  width: 100%;
  height: 130upx;
  background: #f0f0f0;
}

.group_name {
  width: 100%;
  padding: 10upx 0;
}

.doctor_swiper {
  white-space: nowrap;
  padding: 20upx 30upx 40upx;
}

.doctor_item {
  width: 380upx;
  height: 160upx;
  display: inline-flex;
  background: #ffffff;
  box-shadow: 0px 0px 30upx 0upx rgba(0, 0, 0, 0.06);
  border-radius: 10upx;
  margin-right: 20upx;
  padding: 0 24upx;
}

.doctor_item:nth-last-child(1) {
  margin-right: 0;
}

.special_con {
  margin-top: 20upx;
  background-color: #fff;
  overflow: hidden;
}

.special_inner {
  padding: 0 30upx 40upx;
  white-space: nowrap;
}

.special_item {
  width: 280upx;
  height: 200upx;
  background: #95adff;
  border-radius: 10px;
  padding: 24upx;
  display: inline-block;
  margin-right: 20upx;
}

.special_item:nth-last-child(1) {
  margin-right: 0;
}

.special_item_tit {
  font-size: 32upx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #ffffff;
}

.special_item_subtit {
  font-size: 24upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}

.dept_con {
  margin-top: 20upx;
  background-color: #fff;
  overflow: hidden;
}

.dept_inner {
  padding: 0 30upx 40upx;
  white-space: nowrap;
}

.dept_item {
  display: inline-flex;
  margin-right: 92upx;
}

.dept_item:nth-last-child(1) {
  margin-right: 0;
}

.dept_item_img {
  width: 56upx;
  height: 56upx;
  margin-bottom: 16upx;
}

.dept_item_tit {
  font-size: 28upx;
  line-height: 1em;
}

.pharmacy_con {
  margin-top: 20upx;
  background-color: #fff;
  overflow: hidden;
  border-radius: 24upx;
  margin-bottom: 30upx;
}

.pharmacy_inner {
  padding: 0 30upx 40upx;
  white-space: nowrap;
}

.pharmacy_item {
  width: 20%;
}

.pharmacy_item:nth-last-child(1) {
  margin-right: 0;
}

.pharmacy_item_img {
  width: 88upx;
  height: 88upx;
  margin-bottom: 16upx;
}

.pharmacy_item_tit {
  font-size: 24upx;
  line-height: 2em;
}
.recommendDoc_con {
  background-color: #fff;
  overflow: hidden;
  margin-top: 20upx;
  border-radius: 24upx;
}

.recommendDoc_con .nav {
  padding-bottom: 0;
}

.health_con {
  margin-top: 20upx;
  background-color: #fff;
  overflow: hidden;
}

.health_con .nav {
  padding-bottom: 0;
}

.health_inner {
  padding: 0 30upx;
}

.health_inner:nth-last-child(1) .health_inner_border::before {
  border-bottom: 0;
}

.health_val {
  width: 100%;
}

.health_val {
  margin-right: 30upx;
}

.health_val_tit {
  font-size: 32upx;
}

.health_val_time {
  font-size: 24upx;
  margin-top: 20upx;
}

.health_img {
  width: 210upx;
  height: 140upx;
  border-radius: 12upx;
  flex-shrink: 0;
  margin: 32upx 0;
}

.doctor_info {
  width: 210upx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-word;
}

.home_help {
  position: fixed;
  width: 150upx;
  height: 162upx;
  bottom: 177upx;
  right: 0;
}

.p_doctor_name {
  max-width: 4em;
  -webkit-line-clamp: 1;
  font-weight: bold;
}

.back_tit {
  width: 671upx;
  height: 62upx;
  position: relative;
  z-index: 1;
  margin: 0 0 0 6px;
}

.p_doctor_item {
  margin: 0;
  padding: 50upx 40upx 0 30upx;
  align-items: flex-start !important;
  background-color: #fff;
  border-radius: 24upx;
}

.p_doctor_item:nth-child(1) {
  margin: 0;
  padding: 40upx 40upx 0 30upx;
}

.p_doctor_item_con {
  padding-bottom: 50upx;
  width: 100%;
}
.font_bold {
  font-weight: bold;
}
.mb10 {
  margin-bottom: 10upx;
}

.p_inner {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* 背景图 */
.p_back_img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.p_container {
  height: 100% !important;
  background-color: #f0f1f6;
  color: #333333;
  font-family: Source Han Sans CN;
  font-size: 0;
}
.p_content {
  display: inline-block;
  width: 100%;
  font-size: 30upx;
  background-color: #f0f1f6;
}
/* 搜索框 */
.p_search_con {
  width: 100%;
  height: 76upx;
  background: #f0f1f6;
  border-radius: 38upx;
  margin-bottom: 20upx;
  position: relative;
}
.p_flexCenter,
.displayFlexRow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.p_search_input {
  width: 100%;
  text-align: center;
}
.p_placeholder {
  font-size: 30upx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #999999;
}
/* 背景色 */
.p_bgcolor,
.backgroundCustom {
  background-color: #02c28a !important;
  color: #fff !important;
}
.p_flexBetween,
.displayFlexBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 滚动 */
.p_scroll {
  display: flex;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.p_doctor_img_con {
  width: 88upx;
  height: 88upx;
  border-radius: 50upx;
  position: relative;
  margin-right: 20upx;
  flex-shrink: 0;
  margin-top: 4px;
}
.p_doctor_img {
  border-radius: 50%;
}
.p_doctor_infocon {
  width: 100%;
}
.p_doctor_tit {
  display: flex;
  align-items: center;
}
.p_lineClamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.p_doctor_tip {
  height: 32upx;
  background: #fff0e1;
  padding: 0 12upx;
  margin-left: 16upx;
  border-radius: 50px;
}

.p_doctor_star {
  width: 24upx;
  height: 24upx;
}

.p_doctor_starval {
  font-size: 26upx;
  font-family: DINPro;
  font-weight: 500;
  color: #ff9d35;
  margin-left: 9upx;
}
.p_doctor_info {
  font-size: 28upx;
  margin-top: 8upx;
}
.p_flexCenterCol,
.displayFlexCol {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}
.p_doctor_btn {
  min-width: 144upx;
  height: 52upx;
  border-radius: 8px;
  font-size: 28upx;
  color: #ffffff;
  padding: 0 17upx;
  position: relative;
  margin-bottom: 10upx;
  margin-right: -5upx;
}
/* 快速问诊按钮 */
.p_doctor_btn_img {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 26upx;
  top: 0;
  left: 0;
}
.p_doctor_item_introduce {
  font-size: 24upx;
  margin: 10upx 0;
}
.p_color_8a {
  color: #8a8a99 !important;
}

.p_doctor_item_describe {
  font-size: 28upx;
  color: #333333;
}

/* tabbar */
.tabbar {
  height: 44px;
  line-height: 44px;
  text-align: center;
  color: #222;
  box-sizing: content-box;
  font-size: 32upx;
  font-weight: 500;
  background: #f0f1f6;
  width: 100%;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  overflow: hidden;
}

.iconCon {
  width: 87upx;
  height: 40px;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  z-index: 1;
}

.iconLeft {
  width: 12px;
  height: 12px;
  border-top: 2px solid;
  border-left: 2px solid;
  color: #222;
  transform: rotateZ(-45deg);
  position: absolute;
  top: 2px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.p_search_con {
  background-color: #fff;
}
.p_color_9 {
  color: #999999 !important;
}
/* 字体颜色 */
.p_color,
.colorCustom {
  color: #02c28a !important;
}
.nav {
  padding: 34upx 30upx 40upx;
  line-height: 1em;
}
.p_border_bottom,
.border_bottom {
  position: relative;
}
.p_border_bottom::before,
.border_bottom::before {
  content: ' ';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  border-bottom: 1px solid #e6e6e6;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.p_color_4d {
  color: #4d4d54 !important;
}
.lineHeight {
  line-height: 1.4em;
}

.floot {
  background-color: #fff;
  border-radius: 24upx;
}

.floot_top {
  padding: 37upx 30upx 0 34upx;
}

.floot_title {
  position: relative;
  font-size: 32upx;
  font-family: PingFang SC;
  font-weight: 800;
  color: #222326;
}
.floot_title::after {
  content: '';
  position: absolute;
  left: -10upx;
  top: 0;
  width: 38upx;
  height: 38upx;
  background: linear-gradient(229deg, #ffffff 0%, #74b72f 100%);
  opacity: 0.6;
  border-radius: 50%;
}
.floot_titleName {
  position: relative;
  z-index: 1;
}
.floot_tip {
  font-size: 28upx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #8a8a99;
}
.floot_tip text {
  line-height: initial;
}
.icon_right {
  width: 11upx;
  height: 19upx;
  margin-left: 10upx;
}
.flootNoTip {
  text-align: center;
  width: 100%;
  font-size: 30upx;
  margin: 30upx 0;
  color: #43434a;
}
.menuServices_box .menuList {
  width: 25%;
  margin: 40upx 0 36upx;
}
.menuIcon {
  width: 78upx;
  height: 84upx;
  margin-bottom: 20upx;
}

.menuText {
  font-size: 26upx;
  font-family: PingFang SC;
  color: #222326;
}

.p_bt200 {
  padding-bottom: 200upx;
}
</style>