<!--医生详情-->
<template>
  <div>
    <main>
      <div class="bg"></div>
      <div class="doctor">
        <!--         <div class="child1">
          <div style="position: relative;margin-right: .2rem;height: 1.3rem">
            <van-image
              round
              fit="cover"
              width="1.3rem"
              height="1.3rem"
              :src="UserData.HeadImg?UserData.HeadImg:require('@/assets/images/doctor.png')"
              class="doctorAvatar"
            />
            <span class="hospitalLevelTag">{{UserData.HospitalLevel | filterHospitalLevel}}</span>
          </div>
          <div style="text-align: left;">
            <div class="f_ctn">
              <h3 class="ellips">{{UserData.DoctorName}}</h3>

              <transition
                mode="out-in"
                enter-active-class="animated zoomIn"
                leave-active-class="animated zoomOut"
              >
                <div
                  key="0"
                  v-if="!UserData.IsFollow"
                >
                  <van-button
                    @click="AddFollow()"
                    class="followBtn "
                    :icon="!AddFollowStatus?'plus':''"
                    round
                    type="default"
                    size="small"
                  >
                    <van-loading
                      v-if="AddFollowStatus"
                      size=".28rem"
                      color="#ff0031"
                    ></van-loading>
                    {{!AddFollowStatus?'关注':''}}
                  </van-button>
                </div>
                <div
                  key="1"
                  v-else
                >
                  <van-button
                    @click="CancelFollow()"
                    class="cfollowBtn followBtn"
                    round
                    type="default"
                    size="small"
                  >
                    <van-loading
                      v-if="CancelFollowStatus"
                      size=".28rem"
                    ></van-loading>
                    {{!CancelFollowStatus?'取消关注':''}}
                  </van-button>
                </div>
              </transition>

            </div>
            <p>{{UserData.PositionalTitles | filterDoctorTitles}} {{UserData.HospitalDepartments | filterDepartment}}</p>
            <router-link
              :to="'/HospitalDetail?id='+UserData.HospitalId"
              style="color:rgb(114, 174, 252);font-size:.26rem;line-height:.56rem;"
            >{{UserData.HospitalName}}
            </router-link>
          </div>
        </div>
        <div class="zan">
          <div>
            <span>{{UserData.ConcernFrequency}}</span>
            <span>{{UserData.FansFrequency}}</span>
            <span>{{UserData.DummyLikeFrequency+UserData.LikeFrequency}}</span>
          </div>
          <div>
            <span>关注</span>
            <span>粉丝</span>
            <span>获赞</span>
          </div>
        </div>
        <router-link
          to="/"
          class="backHomeTag"
        >回到首页
          <van-icon
            size=".32rem"
            name="home-o"
            style="vertical-align: middle;"
          />
        </router-link> -->

        <div
          class="header-wrap"
          v-show="UserData.DoctorName"
        >
          <div class="info">
            <div class="avatar">
              <van-image
                round
                fit="cover"
                width="2.3rem"
                :src="UserData.HeadImg?UserData.HeadImg:require('@/assets/images/doctor-avatar2.png')"
                class="doctorAvatar"
              />

              <div class="attention-wrap">
                <transition
                  mode="out-in"
                  enter-active-class="animated zoomIn"
                  leave-active-class="animated zoomOut"
                >
                  <div
                    key="0"
                    v-if="!UserData.IsFollow"
                  >
                    <van-button
                      @click="AddFollow()"
                      class="followBtn "
                      :icon="!AddFollowStatus?'plus':''"
                      round
                      type="default"
                      size="small"
                    >
                      <van-loading
                        v-if="AddFollowStatus"
                        size=".28rem"
                        color="#ff0031"
                      ></van-loading>
                      {{!AddFollowStatus?'关注':''}}
                    </van-button>
                  </div>
                  <div
                    key="1"
                    v-else
                  >
                    <van-button
                      @click="CancelFollow()"
                      class="cfollowBtn followBtn"
                      round
                      type="default"
                      size="small"
                    >
                      <van-loading
                        v-if="CancelFollowStatus"
                        size=".28rem"
                      ></van-loading>
                      {{!CancelFollowStatus?'取消关注':''}}
                    </van-button>
                  </div>
                </transition>
              </div>
            </div>
            <div class="nikename">
              <span class="ellips">{{UserData.DoctorName}}</span>
              <i>{{UserData.PositionalTitles | filterDoctorTitles}}</i>
            </div>
            <div class="department">
              <span>{{UserData.HospitalDepartments | filterDepartment}}</span>
            </div>
            <p class="hospital">
              <router-link
                :to="'/HospitalDetail?id='+UserData.HospitalId"
                style="font-size:.3rem;line-height:.56rem;"
              >
                {{UserData.HospitalName}}
              </router-link>
            </p>
          </div>
          <div class="attention">
            <ul>
              <li>{{UserData.DummyLikeFrequency+UserData.LikeFrequency}} <i>获赞</i> </li>
              <li>{{UserData.ConcernFrequency}} <i>关注</i></li>
              <li>{{UserData.FansFrequency}} <i>粉丝</i> </li>
            </ul>
          </div>
          <div class="category">
            <ul>
              <li v-for="(item, index) in doctorServiceList" @click="servicesJump(item.Url, item.ServiceName)">
                <img
                  :src="item.Icon"
                >
                <span>{{item.ServiceName}}</span>
              </li>
            </ul>
          </div>
        </div>

      </div>
      <van-tabs
        v-model="active"
        style="margin-top: .2rem;"
        color="#4CA0FF"
        title-active-color="#4CA0FF"
      >
        <van-tab :title="`健康视频 (${videoTotal})`">
          <ShortWaterfallFlow
            :videoList="ShortVideoList"
            @onload="GetShortVideoList"
            :options="{
                isLoading:videoLoading,
                finished:videoFinished,
             }"
            @click="jumpToShortVideo"
          ></ShortWaterfallFlow>
        </van-tab>
        <van-tab :title="`健康课程 (${healthVideoTotal})`">
<!--           <van-sticky>
            <div class="VideoType">
              <van-button
                @click="SwitcherVideoType(-1)"
                :color="status == -1?'#4CA0FF':''"
                round
                type="default"
                size="small"
              >全部
              </van-button>
              <van-button
                @click="SwitcherVideoType(0)"
                :color="status == 0?'#4CA0FF':''"
                round
                type="default"
                size="small"
              >免费
              </van-button>
              <van-button
                @click="SwitcherVideoType(1)"
                :color="status == 1?'#4CA0FF':''"
                round
                type="default"
                size="small"
              >精品
              </van-button>
            </div>
          </van-sticky> -->

<!--           <WaterfallFlow
            :videoList="VideoList"
            @load="GetVideoList"
            :options="{
                      isLoading:loading,
                      finished:finished,
                  }"
            @click="jumpTo"
          ></WaterfallFlow> -->

          <CourseList :videoList="VideoList"
           @load="GetVideoList"
           :options = "{
             isLoading:loading,
             finished: finished
           }"
           @click="jumpTo"
           ></CourseList>
        </van-tab>
        <van-tab title="简介">
          <div class="doctorGoods">
            <div>
              <p>
                <img
                  :src="require('../../../assets/images/good-icon1.png')"
                  alt
                />
                擅长
                <van-button
                  type="default"
                  round
                  size="mini"
                  style="float: right;"
                  @click="SkillAllShow = !SkillAllShow"
                >
                  {{SkillAllShow?'收起':'展开'}}
                  <van-icon
                    v-if="!SkillAllShow"
                    name="arrow-down"
                    size="12px"
                    style="vertical-align: text-top;"
                  />
                  <van-icon
                    v-if="SkillAllShow"
                    name="arrow-up"
                    size="12px"
                    style="vertical-align: text-top;"
                  />
                </van-button>
              </p>
              <div :class="SkillAllShow ? '' :'hide'">{{UserData.Skill || '暂无擅长'}}</div>
            </div>
            <div>
              <p>
                <img
                  :src="require('../../../assets/images/good-icon2.png')"
                  alt
                />
                介绍
                <van-button
                  type="default"
                  round
                  size="mini"
                  style="float: right;"
                  @click="IntroductionAllShow = !IntroductionAllShow"
                >
                  {{IntroductionAllShow?'收起':'展开'}}
                  <van-icon
                    v-if="!IntroductionAllShow"
                    name="arrow-down"
                    size="12px"
                    style="vertical-align: text-top;"
                  />
                  <van-icon
                    v-if="IntroductionAllShow"
                    name="arrow-up"
                    size="12px"
                    style="vertical-align: text-top;"
                  />
                </van-button>
              </p>
              <div :class="IntroductionAllShow ? '' :'hide'">{{UserData.Introduction || '暂无介绍'}}
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab
          title="坐诊预约"
          v-if="UserData.ListDissertation && UserData.ListDissertation.length > 0"
        >
          <div class="zuozhenlist">
            <!-- 拼优医不显示 -->
            <div
              v-for="(item,index) in UserData.ListDissertation"
              class="item"
              @click="toFreeClinicDetail(item.ID)"
              :key="index"
              v-if="item.DissertationPattern!=3"
            >
              <div class="itemImgCtn">
                <div class="itemImgBg">
                  <van-image
                    class="itemImg"
                    fit="cover"
                    :src="item.FlatPatternImg"
                  >
                    <template v-slot:error>图片加载失败...</template>
                    <template v-slot:loading>
                      <van-loading
                        type="spinner"
                        style="text-align: center;line-height: 2.6rem;"
                        size="40"
                      />
                    </template>
                  </van-image>
                </div>
              </div>
              <div class="itemInfo">
                <van-image
                  round
                  fit="cover"
                  width=".8rem"
                  height=".8rem"
                  :src="item.DissertationImg"
                  style="margin-right: .2rem;"
                />
                <div style="width: 6.3rem;">
                  <h3>
                    <span class="h3">{{item.DissertationName}}</span>
                    <span
                      class="tag"
                      v-if="item.DissertationPattern == 2"
                    >{{item.DissertationPattern == 2?'专家1诊':''}}</span>
                  </h3>
                  <p>
                    {{item.VisitStartTime | getTime}} 至 {{item.VisitEndTime | getTime}}
                    <span v-if="(item.DisNumber+DisNumber) > 30">{{item.DisNumber+DisNumber}}人已报名</span>
                  </p>
                </div>
              </div>
              <div class="brief">{{item.DissertationIntro}}</div>
              <div class="itemTime">
                <span>{{item.HospitalName}}</span>
                <DownTime
                  :VisitStartTime="item.VisitStartTime"
                  :VisitEndTime="item.VisitEndTime"
                  :AppointmentsStartTime="item.AppointmentsStartTime"
                  :AppointmentsEndTime="item.AppointmentsEndTime"
                ></DownTime>
              </div>
            </div>
          </div>
          <div style="font-size: .22rem;text-align: center;color: #666;margin: .5rem 0;">没有更多了~
          </div>
        </van-tab>
      </van-tabs>

    </main>
    <!-- <div
      class="ToChat"
      v-if="active == 0 "
    >
      <span @click="NextSpecial">预约下次</span>
                 <span @click="ToChat">在线问诊</span>
    </div> -->
  </div>
</template>

<script>
// import WaterfallFlow from '@/components/WaterfallFlow.vue';
import ShortWaterfallFlow from '@/components/ShortWaterfallFlow.vue';
import DownTime from "@/components/DownTime";
import { getDoctorShortVideo } from '../../../api/ShortVideo/ShortVideo.js'
import CourseList from '@/components/CourseList.vue'
export default {
  name: "doctorDetail",
  components: { DownTime, ShortWaterfallFlow, CourseList },
  data() {
    return {
      doctorServiceList: [],    // 医生服务
      videoLoading: false,
      videoFinished: false,
      shortVideoParams: {     // 获取短视频列表参数
        pageIndex: 1,
        pageSize: 10
      },
      videoTotal: 0,          // 短视频总条数
      healthVideoTotal: 0,    // 健康课程视频总条数
      loading: false,
      finished: false,
      active: 0,
      status: -1, // 视频类型 -1 全部 0不收费 1收费
      UserData: {},
      id: "",
      SkillAllShow: false,
      IntroductionAllShow: false,
      VideoList: [],
      ShortVideoList: [],
      pageSize: 10,
      pageIndex: 1,
      AddFollowStatus: false,
      CancelFollowStatus: false,
    };
  },
  mounted() {
    this.GetShortVideoList();
    // this.shortVideoParams.accountid = this.id;
    this.shortVideoParams.name = this.id;
  },
  created() {
    this.id = this.$route.query.id;
    this.UserGetDoctorDiss();
    this.GetVideoList();
  },
  methods: {
    // 医生服务跳转
    servicesJump(url, name){
      if(name === '在线问诊') {
        this.$toast({
          message: '请在公众号菜单点击 "在线问诊" 进入小程序使用功能',
          duration: 5000
        })
      }else if (name === '手术预约') {
        window.location.href = url
      }else {
        this.$toast('因疫情原因,暂不提供服务');
      }
    },
    // 获得医生信息
    UserGetDoctorDiss() {
      this.$http.UserGetDoctorDiss(this.id).then(res => {
        var data = res.data.ResultObject;
        if (res.data.IsSuccess) {
          this.doctorServiceList = res.data.ResultObject.YServiceList;
          this.UserData = data || {};
          if (this.UserData.ListDissertation) {
            this.UserData.ListDissertation = data.ListDissertation.filter(
              a => a != null && a != undefined
            );
          }

        } else {
          this.$toast(res.data.ResultMsg);
        }

        // 分享
        try {
          window.UEShare();
        } catch (error) {
        }
      });
    },

    // 跳转坐诊详情
    toFreeClinicDetail(id) {
      this.$router.replace({
        path: "/freeClinicDetail",
        query: { id: id }
      });
    },

    // 预约下次坐诊
    NextSpecial() {
      if (!this.id) {
        this.$toast("发生错误，无医生ID");
        return;
      }
      this.$router.push({ path: "/nextSpecial", query: { id: this.id } });
    },

    // 跳转在线问诊
    ToChat() {
      this.$toast("暂未开通，敬请期待");
      return;
    },

    // 切换视频类型
    SwitcherVideoType(e) {
      this.status = e;
      this.VideoList = [];
      this.finished = false;
      this.loading = true;
      this.pageIndex = 1;
      this.GetVideoList();
    },

    // 获取视频列表
    GetVideoList() {
      this.isRequest();
      this.loading = true;
      var obj = {
        typeid: '',
        name: '',
        doctorid: this.id,
        status: this.status,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      }
      this.$http.VideoGetList(obj).then(({ data }) => {
        this.loading = false;
        if (data.IsSuccess) {
          this.healthVideoTotal = data.Pager.TotalItemCount;
          // this.VideoList = data.ResultObject.concat(this.VideoList);
          this.VideoList = [...this.VideoList, ...data.ResultObject]
          this.pageIndex++;
          if (data.ResultObject.length < this.pageSize) {
            this.finished = true;
          }
          this.$toast.clear();
        } else {
          this.$toast(data.ResultMsg)
        }
      })
    },

    // 添加关注
    AddFollow() {
      if (this.AddFollowStatus) {
        return;
      }
      this.AddFollowStatus = true;
      this.$http.VideoAddFollow(this.id).then(({ data }) => {
        this.AddFollowStatus = false;
        if (data.IsSuccess) {
          this.$toast('已关注');
          this.UserData.IsFollow = true;
        } else {
          this.$toast(data.ResultMsg);
        }
      })
    },

    // 取消关注
    CancelFollow() {
      if (this.CancelFollowStatus) {
        return;
      }
      this.CancelFollowStatus = true;
      this.$http.VideoCancelFollow(this.id).then(({ data }) => {
        this.CancelFollowStatus = false;
        if (data.IsSuccess) {
          this.$toast('已取消关注');
          this.UserData.IsFollow = false;
        } else {
          this.$toast(data.ResultMsg);
        }
      })
    },

    // 点击视频跳转
    jumpTo(id) {
      this.$router.push({ name: "healthCourse", query: { id } });
    },

    jumpToShortVideo(currentVideoIndex, currentVideoList, currentPageIndex) {
      this.$router.push({ name: "videoPlay", query: { currentVideoIndex, currentVideoList, currentPageIndex, videoTotal: this.videoTotal, source: "doctorDetail", accountid: this.id } })
    },

    // 短视频点击跳转小程序
    BackVideo(videoid) {
      wx.miniProgram.switchTab({ url: '/pages/video/video?DoctorId=' + this.id + '&VideoId=' + videoid })
    },

    // 获取短视频列表
    GetShortVideoList() {
      this.videoLoading = true;
      getDoctorShortVideo(this.shortVideoParams)
        .then(({ data }) => {
          console.log('视频列表', data)
          if (data.isSuccess) {
            this.videoLoading = false;
            this.videoTotal = data.pager.totalItemCount;
            if (data.pager.totalItemCount === this.ShortVideoList.length) {
              this.videoFinished = true;
              --this.shortVideoParams.pageIndex;
            } else {
              this.ShortVideoList = [...this.ShortVideoList, ...data.resultObject];
              this.shortVideoParams.pageIndex++;
            }
          } else {
            this.$toast(data.resultMsg);
            this.$toast.clear();
          }
        })
    }
  },
  filters: {
    filterDepartment(str) {
      if (str) {
        return str.split(",").join(" ");
      }
    }
  }
};
</script>

<style scoped lang="less">
em,
i {
  font-style: normal;
}

/deep/ .van-tabs__line {
  width: 1.48rem !important;
}

.followBtn {
  color: #ff0031;
  border: 1px solid #ff0031;
}
.cfollowBtn {
  color: #b4afaf !important;
  border: 1px solid #e6e6e6 !important;
}
.createdTag(@width:1.1rem,@height:0.38rem) {
  width: @width;
  height: @height;
  display: inline-block;
  text-align: center;
  line-height: @height;
  font-size: 0.22rem;
  color: #ffffff;
  vertical-align: bottom;
}
.VideoType {
  padding: 0.2rem;
  background-color: #fff;

  > button {
    margin-right: 0.2rem;
  }
}
.ToChat {
  width: 100%;
  height: 1rem;
  position: fixed;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
  padding: 0.1rem 0.2rem;
  box-shadow: 0 -1px 9px 0px #ccc;
  background-color: #fff;

  > span {
    display: inline-block;
    width: 2.13rem;
    height: 0.7rem;
    text-align: center;
    font-size: 0.32rem;
    color: #ffffff;
    border-radius: 25px;
    line-height: 0.7rem;
  }

  > span:nth-child(1) {
    background-color: #ffb00f;
    margin-right: 0.3rem;
  }

  > span:nth-child(2) {
    background-color: #4ca0ff;
  }
}
.E {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hide {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
main {
  text-align: left;
}
.doctorAvatar {
  border: 2px solid #fff;
  background: #fff;
}
.hospitalLevelTag {
  .createdTag();
  background: linear-gradient(left top, #ff8b02, #ff6600);
  border-radius: 15px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.backHomeTag {
  .createdTag(@width: auto, @height:.4rem);
  background: #38a5ff;
  border-radius: 15px 0 0 15px;
  position: absolute;
  right: 0;
  top: 0.3rem;
  margin: 0 auto;
  padding: 0 0.1rem;
}
.bg {
  width: 7.5rem;
  height: 3.13rem;
  background: url("../../../assets/images/doctor-bg.png") no-repeat 0 0;
  -webkit-background-size: 7.5rem 3.13rem;
  background-size: 7.5rem 3.13rem;
}
.doctor {
  width: 7.1rem;
  min-height: 2.8rem;
  height: auto;
  background-color: #fff;
  border-radius: 10px;
  box-sizing: border-box;
  margin: -1.85rem auto 0;
  box-shadow: 0px 3px 2px 0px #eaf0fa;
  position: relative;
  .child1 {
    display: flex;
    > div {
      text-align: center;
      > .f_ctn {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 0.2rem;
        h3 {
          position: relative;
          font-size: 0.34rem;
          color: #333333;
          margin-right: 0.2rem;
          max-width: 3.7rem;
          span {
            position: absolute;
            bottom: 0;
            margin-left: 0.2rem;
            font-size: 0.24rem;
          }
        }
      }
      > p {
        font-size: 0.26rem;
        margin-bottom: 0.1rem;
      }
      > p:nth-child(2) {
        font-size: 0.24rem;
      }
    }
  }

  /* 头部样式重构 */
  .header-wrap {
    .info,
    .attention {
      padding: 0 0.3rem 0;
    }
    .info {
      .avatar {
        display: flex;
        align-items: center;
        .doctorAvatar {
          margin-top: -0.6rem;
        }
        .attention-wrap {
          width: 100%;
          text-align: right;
        }
      }
      .nikename {
        margin-top: 0.2rem;
        > span {
          font-size: 0.34rem;
          color: #000;
        }

        > i {
          margin-left: 0.2rem;
          font-size: 0.28rem;
        }
      }
      .department,
      .hospital {
        margin-top: 0.26rem;
        color: #000;
        font-size: 0.3rem;
      }
      .hospital {
      }
    }
    /* 点赞、关注、粉丝数量部分 */
    .attention {
      margin-top: 0.4rem;
      font-size: 0.36rem;
      color: #000;
      padding-bottom: 0.2rem;
      ul {
        display: flex;
        li {
          i {
            color: #666;
            font-size: 0.28rem;
          }
          &:nth-last-child(-n + 2) {
            margin-left: 0.4rem;
          }
        }
      }
    }

    /* 分类部分 */
    .category {
      color: #000;
      font-size: 0.3rem;
      border-top: 1px solid #ebebeb;
      padding: 0.3rem 0;
      ul {
        display: flex;
        flex-wrap: wrap;
        // justify-content: space-around;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        li {
          width: 25%;
          margin-bottom: 0.4rem;
          img {
            display: block;
            margin: 0 auto 0.2rem auto;
            width: 0.86rem;
            height: 0.86rem;
          }
        }
      }
    }
  }
}
.zuozhenlist {
  padding-top: 0.2rem;
  text-align: center;
  /*专场*/

  .item {
    width: 7.1rem;
    border-radius: 5px;
    box-sizing: border-box;
    margin: 0.1rem auto;
    overflow: hidden;
    text-align: left;
    display: inline-block;
    position: relative;

    .itemImgCtn {
      width: 100%;
      height: 1.5rem;
      overflow: hidden;
      position: relative;
      background-color: #fff;

      .itemImgBg {
        width: 45.19rem;
        height: 45.19rem;
        position: absolute;
        left: 50%;
        bottom: 0;
        right: 0;
        margin: auto;
        transform: translateX(-50%);
        border-radius: 50%;
        overflow: hidden;
      }

      .itemImg {
        width: 7.1rem;
        height: 1.5rem;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    }

    .itemInfo {
      display: flex;
      box-sizing: border-box;
      padding: 0 0.2rem;
      text-align: left;
      align-items: center;
      margin-top: 0.2rem;

      h3 {
        margin-bottom: 0.1rem;

        span {
          vertical-align: text-top;
        }
      }

      span.h3 {
        margin-bottom: 0.1rem;
        font-size: 0.34rem;
        color: #333333;
        .E;
        max-width: 4.5rem;
        display: inline-block;
        margin-right: 0.1rem;
      }

      span.tag {
        width: 1.1rem;
        height: 0.38rem;
        display: inline-block;
        border-radius: 15px 15px 15px 0;
        background: linear-gradient(left top, #ff9002, #ff6700);
        text-align: center;
        line-height: 0.38rem;
        font-size: 0.22rem;
        color: #ffffff;
      }

      p {
        span {
          float: right;
          font-size: 0.26rem;
          color: #ff0000;
        }
      }
    }

    .brief {
      font-size: 0.24rem;
      color: #666666;
      line-height: 1.3;
      margin-top: 0.2rem;
      word-wrap: break-word;
    }

    .itemTime {
      display: flex;
      justify-content: space-between;

      > p {
        height: 0.8rem;
        min-width: 1.8rem;
      }

      > span {
        width: 5.3rem;
        height: 0.8rem;
        line-height: 0.8rem;
        font-size: 0.28rem;
        color: #3ba8ff;
        .E;
      }
    }
  }
}
.doctorGoods {
  margin-top: 0.2rem;

  > div {
    padding: 0 0.3rem;
    margin-bottom: 0.5rem;

    > p {
      font-size: 0.32rem;
      color: #333333;
      margin-bottom: 0.2rem;

      img {
        vertical-align: sub;
        width: 0.38rem;
        margin-right: 0.14rem;
      }
    }

    > div {
      font-size: 0.24rem;
      color: #333333;
      line-height: 1.7;
    }
  }
}
.zan {
  > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    span {
      display: inline-block;
      flex: 1;
      text-align: center;
      font-size: 0.29rem;
      color: #e99744;
      max-width: 2rem;
      .E;
    }
  }
  > div:nth-child(2) {
    margin-top: 0.2rem;
    span {
      font-size: 0.25rem;
      color: #5e5d5e;
    }
  }
}
</style>
