postdischarge-ui/src/views/system/record/record.vue

<template>
  <div class="header">
    <div class="topheader">
      <div class="user">
        <img class="headsculpture" src="../../../assets/manage/touxiang.png" alt="" v-if="list.sex == 'MALE'" />
        <img class="headsculpture" src="../../../assets/manage/nvtouxiang.png" alt="" v-if="list.sex == 'FEMALE'" />
        <div class="name">
          {{ list.patientName }}
        </div>
        <div class="gender">
          {{ list.sex == "MALE" ? "男" : list.sex == "FEMALE" ? "女" : "" }}
        </div>
        <div class="age">
          {{ list.age }}
        </div>
        <div class="source">
          <div class="item" style="color: #00e06e; border-color: #00e06e"
            v-if="list.patientSource == 'WE_CHAT_OFFICIAL_ACCOUNT'">
            <img src="../../../assets/manage/gzh.png" alt="" style="width: 24px" />
            <div>公众号</div>
          </div>
          <div class="item" style="color: #339de5; border-color: #339de5" v-if="list.patientSource == 'WE_CHAT_APPLET'">
            <img src="../../../assets/manage/xcx.png" alt="" />
            <div>小程序</div>
          </div>
          <div class="item" style="color: #f4881f; border-color: #f4881f" v-if="list.patientSource == 'MANAGE_END'">
            <img src="../../../assets/manage/gld.png" alt="" />
            <div>管理端</div>
          </div>
        </div>
      </div>
      <div class="information">
        <div class="top">
          <div>身份证号：{{ list.cardNo }}</div>
          <div>患者电话：{{ list.patientPhone }}</div>
          <div style="width: 50%">出生日期：{{ list.birthDate }}</div>
        </div>
        <div class="bottom">
          <!-- <div>注册时间：{{ $route.query.createTime }}</div> -->
          <div>家属电话：{{ list.familyMemberPhone }}</div>
          <div style="width: 50%">住址：{{ list.address }}</div>
        </div>
      </div>
    </div>
    <div class="bottomheader">
      <!-- 运动指导 -->
      <!-- <div class="sport">运动指导</div>
      <div class="sports">抗阻运动</div>
      <div class="word">
        抗阳运动可以加强心脏功能，改善血液循环，有效降低脑梗风,险您每周进行2次，每次30分钟抗阳运动。在运动时心率维持,指导如下：

      </div> -->
      <!-- <div class="videoleft"><video src=""></video></div>
      <div class="attention">运动注意事项</div>
      <div class="attention">
        1、每次运动前需做热身运动5分钟，运动后需做放松运动5分钟，主要以低强度的有运动如慢步走为主
      </div>
      <div class="attention">
        2、劳逸结合:注意控制锻炼时间，注意劳逸结合，运动后无明显的疲倦感3、循序渐进:循序渐进地进行锻炼，初始以简单、低强度的运动为主，随后可逐渐增加强度和锻炼时间
      </div>
      <div class="attention">
        3、循序渐进:循序渐进地进行锻炼，初始以简单、低强度的运动为主，随后可逐渐增加强度和锻炼时间。
      </div> -->

      <!-- 复诊提醒 -->
      <!-- <div>
        <div class="sport">复诊提醒</div>
        <div class="time">
          <span class="number">1</span>
          复诊时间
        </div>
        <div class="nexttime">您的下次复诊时间为2024-03-26</div>

        <div class="images">
          <image src="../assets/images/profile.jpg"></image>
        </div>
      </div> -->
      <div style="display: flex">
        <!-- 出院记录 -->
        <div style="width: 30%; overflow: auto">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="入院记录" name="first">
              <div v-html="list.inHospitalInfo"></div>
            </el-tab-pane>
            <el-tab-pane label="手术记录" name="second">
              <div v-html="list.surgicalRecord"></div>
            </el-tab-pane>
            <el-tab-pane label="出院记录" name="third">
              <div v-html="list.outHospitalInfo"></div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <!-- 文章模板 -->
        <div class="right" v-if="$route.query.taskType == 'PROPAGANDA_ARTICLE'">
          <div class="sport">文章模板:{{ formview.propagandaTitle }}</div>
          <div class="bodytop">
            <div>
              <div class="know">{{ formview.propagandaTitle }}</div>
              <div class="knowlist">
            <Editorxj
            v-model="formview.propagandaContent"
            :min-height="192"
          />
          </div>
              <!-- <div class="knowlist">
                {{ formview.propagandaContent }}
              </div> -->
              <img :src="baseUrl + formview.propagandaCoverPath" alt="" />
              <video v-if="materialsType == 'VIDEO'" ref="myVideo" :src="baseUrl + materialsFilePath" controls></video>
            </div>
          </div>
        </div>
        <!-- 问卷模板 -->
        <div class="right" v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE' ||
          $route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'
          ">
          <div style="float: right; margin-top: 20px" v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE' ||
          $route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'
          ">
            <el-form :inline="true" class="demo-form-inline" :model="questiondata" ref="questiondata">
              <el-form-item label="任务处理信息" prop="routeHandleRemark">
                <el-input type="textarea" disabled placeholder="请输入任务处理信息" v-model="questiondata.routeHandleRemark" />
              </el-form-item>
            </el-form>
          </div>
          <div class="sport" v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE'">
            问卷模板: Barthel指数评定问卷
          </div>
          <div class="words" v-if="$route.query.taskType == 'QUESTIONNAIRE_SCALE'">
            您好!本问卷用于评估日常生活能力，请根据自身日常实际表现选择合适的选项。
          </div>

          <div class="sport" v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'">
            人工随访模板: 神经内科人工随访
          </div>
          <div class="words" v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'">
            **您好!
          </div>
          <div class="words" v-if="$route.query.taskType == 'ARTIFICIAL_FOLLOW_UP'">
            我是✕✕医院的工作人员，今天给您打电话想要了解一下您的恢复情况。
          </div>

          <div class="words" v-for="(item, index) in questiondata.subjectResultList" :key="index">
            {{ index + 1 }}.{{ item.questionName }}
            <span v-if="item.questionType == 'MULTIPLE_CHOICE'">（单选题）</span>
            <span v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS'">（多选题）</span>
            <span v-if="item.questionType == 'SCORING_QUESTIONS'">（打分题）</span>
            <span v-if="item.questionType == 'COMBINATION_RADIO_SUBJECT'">（组合单选题）</span>
            <span v-if="item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'">（组合多选题）</span>
            <span v-if="item.questionType == 'COMBINATION_BLANKS_SUBJECT'">（组合填空题）</span>
            <span v-if="item.questionType == 'FILL_IN_THE_BLANKS'">（填空题）</span>
            <span v-if="item.questionType == 'COMBINATION_SCORING_SUBJECT'">（组合打分题）</span>
            <span v-if="item.questionType == 'DATE_BLANKS_SUBJECT'">（日期填空题）</span>
            <span v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">（时间填空题）</span>
            <el-radio-group v-if="item.questionType == 'MULTIPLE_CHOICE' ||
          item.questionType == 'COMBINATION_RADIO_SUBJECT' ||
          item.questionType == 'SCORING_QUESTIONS' ||
          item.questionType == 'COMBINATION_SCORING_SUBJECT'
          " v-model="item.checked" class="custom-radio-group" @change="radioGroupChange($event, item)">
              <el-radio disabled class="custom" v-for="(aitem, aindex) in item.optionResults" :key="aindex"
                :label="aitem.id" @change="radioChange($event, aitem, index)">{{ aitem.optionName }}</el-radio>
            </el-radio-group>
            <!-- 多选、组合多选 -->
            <el-checkbox-group v-model="checkeddata" @change="radioGroupChange($event, item, 'checkbox')" v-if="item.questionType == 'MULTIPLE_CHOICE_QUESTIONS' ||
          item.questionType == 'COMBINATION_MULTIPLE_SUBJECT'
          ">
              <el-checkbox disabled v-for="(aitem, aindex) in item.optionResults" :key="aindex" :label="aitem.id"
                @change="radioChangecheck($event, aitem, index, aindex)">{{ aitem.optionName }}</el-checkbox>
            </el-checkbox-group>
            <!-- 填空题、组合填空 -->
            <div v-if="item.questionType == 'FILL_IN_THE_BLANKS' ||
          item.questionType == 'COMBINATION_BLANKS_SUBJECT'
          " class="tk">
              <el-input disabled v-model="item.fillBlanksAnswer" placeholder="请输入答案" type="textarea" />
              <!-- <el-input></el-input> -->
            </div>
            <!-- 日期填空题、 -->
            <div v-if="item.questionType == 'DATE_BLANKS_SUBJECT'" style="margin: 20px 0 10px 30px">
              <el-date-picker disabled @change="timepicker($event, index)" clearable v-model="item.fillBlanksAnswer"
                type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
              </el-date-picker>
            </div>
            <!-- 时间填空题 -->
            <div style="margin: 20px 0 10px 30px" v-if="item.questionType == 'TIME_BLANKS_SUBJECT'">
              <el-time-select disabled @change="timepickerselect($event, index)" clearable
                v-model="item.fillBlanksAnswer" :picker-options="{
          start: '08:30',
          step: '00:30',
          end: '23:30',
        }" placeholder="选择时间">
              </el-time-select>
            </div>
          </div>
        </div>
        <!-- 电话外呼 -->
        <!-- <div v-if="$route.query.taskType == 'PHONE_OUTBOUND'">
          <div class="sport">电话外呼</div> -->
          <div v-if="$route.query.taskType == 'PHONE_OUTBOUND'">
          <div class="sport">电话外呼</div>

          <div class="nexttime">
            <el-form
              ref="formlist"
              :model="formlist"
              label-width="110px"
              :inline="true"

            >
            <!-- <br/> -->
              <el-form-item label="是否接通" prop="phone">
                <el-radio v-model="formlist.phoneConnectStatus" label="CONNECTED"
                  >已接通</el-radio
                >
                <el-radio v-model="formlist.phoneConnectStatus" label="NOTCONNECTED"
                  >未接通</el-radio
                >
              </el-form-item>
              <br />

              <el-form-item label="任务处理信息" prop="routeHandleRemark">
                <el-input
                  v-model="formlist.routeHandleRemark"
                  placeholder="请输入任务处理信息"
                />
              </el-form-item>
              <br />
              <!-- <el-form-item label="话术名称" prop="scriptName">
                <el-input
                  disabled
                  v-model="formlist.scriptName"
                  placeholder="请输入话术名称"
                />

              </el-form-item> -->
              <!-- <br /> -->
              <el-form-item label="通用话术名称" prop="phoneTemplateName">
                <el-input
                  disabled
                  v-model="formlist.phoneTemplateName"
                  placeholder="请输入通用话术名称"
                />
              </el-form-item>
              <br />
              <!-- <el-form-item label="话术简介" prop="scriptIntroduction">
                <el-input
                  disabled
                  type="textarea"
                  v-model="formlist.scriptIntroduction"
                  placeholder="请输入话术简介"
                />
              </el-form-item>

              <el-form-item label="任务处理信息" prop="routeHandleRemark">
                <el-input
                  type="textarea"
                  v-model="formlist.routeHandleRemark"
                  placeholder="请输入任务处理信息"
                />
              </el-form-item> -->
              <!-- <br /> -->
              <el-form-item label="电话推送" prop="phonePushSign">
                <!-- <el-input

                  type="textarea"
                  v-model="formlist.routeHandleRemark"
                  placeholder="请输入任务处理信息"
                /> -->
                <!-- <el-switch
                  disabled
                  v-model="formlist.phonePushSign"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                >
                </el-switch> -->
                <el-radio disabled v-model="formlist.phonePushSign" label="1"
                  >已开启</el-radio
                >
                <el-radio  disabled v-model="formlist.phonePushSign" label="0"
                  >未开启</el-radio
                >
              </el-form-item>
              <br />

              <el-form-item label="电话" prop="patientPhone">
                <el-input
                  disabled
                  v-model="formlist.patientPhone"
                  placeholder="请输入电话"
                />
              </el-form-item>
              <br />
              <!-- <div style="background:red;width:200px;height:1600px"> -->
              <el-form-item label="重复次数" prop="phoneRedialTimes">
                <el-select
                  v-model="formlist.phoneRedialTimes"
                  disabled
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in optionslistS"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <br />
              <el-form-item label="发送短信" prop="phone">
                <el-select
                  disabled
                  v-model="formlist.phoneMessageRemind"
                  style="width: 200px"
                >
                  <el-option
                    v-for="item in optionslist"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :value="item.dictValue"
                  >
                  </el-option>
                </el-select>
                <!-- <el-input
                  style="width: 200px"
                  v-model="formlist.phoneMessageRemind"
                  placeholder="请输入电话"
                /> -->
              </el-form-item>
              <br />
        <div class="pushMethod">
              <el-form-item label="短信模板：" prop="phone">
                <span class="spanname">
                  <message
                  style="width: 200px;height: 10px;"
                  @on-template="messageontemplateMESSAGE"
                  :templateId="formlist.phoneMessageTemplateId"
                  :templateName="formlist.phoneMessageTemplateName"
                ></message>
                </span>

              </el-form-item>
            </div>
            <br/>
              <el-form-item label="话术图" prop="phone">
                <img
                  :src="formlist.scriptFilePath"
                  style="width: 250px; height: 200px"

                />
              </el-form-item>
              <br />
            </el-form>
          </div>
          <!-- <div class="nexttime">
            <el-form ref="form" :model="formlist" label-width="110px" :inline="true">
              <el-form-item label="话术名称" prop="scriptName">
                <el-input disabled v-model="formlist.scriptName" placeholder="请输入话术名称" />
              </el-form-item>
              <br />
              <el-form-item label="通用话术名称" prop="commonScriptName">
                <el-input disabled v-model="formlist.commonScriptName" placeholder="请输入通用话术名称" />
              </el-form-item>
              <br />
              <el-form-item label="话术简介" prop="scriptIntroduction">
                <el-input disabled type="textarea" v-model="formlist.scriptIntroduction" placeholder="请输入话术简介" />
              </el-form-item>
              <el-form-item label="任务处理信息" prop="routeHandleRemark">
                <el-input type="textarea" disabled placeholder="请输入任务处理信息" v-model="formlist.routeHandleRemark" />
              </el-form-item>
            </el-form>
          </div> -->
        </div>
        <!-- 文字提醒 -->
        <div v-if="$route.query.taskType == 'TEXT_REMIND'">
          <div class="sport">文字提醒</div>

          <div class="nexttime">
            <el-form ref="form" :model="formlists" label-width="110px" :inline="true">
              <el-form-item label="提醒内容" prop="textRemindContent">
                <el-input disabled type="textarea" style="width: 500px" v-model="formlists.textRemindContent"
                  placeholder="请输入提醒内容" />
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPropaganda } from "@/api/manage/propaganda";
import Editorxj from "../../system/Editorxj/index.vue";
import message from "../components/message.vue";

import {

  selectPhonePush,
} from "@/api/system/followupsee";
import {
  selectVisitRecord,
  selectPatientQuestionSubmit,
} from "@/api/system/taskExecuteRecord";
import { getScript } from "@/api/manage/script";
import { getAgencytype } from "@/api/system/agency";
export default {
  components: {
    message,
    Editorxj
  },
  name: "patientdetails",
  // components: { },
  data() {
    return {
      checkeddata: [],
      formlists: {},
      baseUrl: process.env.VUE_APP_BASE_API,
      radio: "1",
      activeName: "first",
      id: "",
      list: [],
      questiondata: {
        totalScore: 0, //总分
        routeHandlePerson: null,
        routeHandleId: null,
      },
      formview: [],
      // 电话外呼
      formlist: {},
      materialsFilePath: "",
      materialsType: "",
      optionslistS:[],
      optionslist:[],
    };
  },
  created() {
    console.log(this.$route.query);
    this.info();
    this.infolistMESSAGE();
    this.infolistword()
    // 文字提醒
    if (this.$route.query.textRemindContent) {
      this.formlists.textRemindContent = this.$route.query.textRemindContent;
    }
    if (this.$route.query.routeHandleRemark) {
      this.formlist.routeHandleRemark = this.$route.query.routeHandleRemark;
    }
    // 文章末班
    if (this.$route.query.taskType == "PROPAGANDA_ARTICLE") {
      this.getPropagandaLIST();
    } else if (
      // 人工随访和问卷
      this.$route.query.taskType == "ARTIFICIAL_FOLLOW_UP" ||
      this.$route.query.taskType == "QUESTIONNAIRE_SCALE"
    ) {
      this.selectlist();
    } else if (this.$route.query.taskType == "PHONE_OUTBOUND") {
      // 电话外呼
      selectPhonePush(this.$route.query.manageRouteNodeId).then((response) => {
        if (response.data) {
          this.formlist = response.data;
          if(this.formlist.phonePushSign==0){
            this.formlist.phonePushSign='0'
          }else if(this.formlist.phonePushSign==1){
            this.formlist.phonePushSign='1'
          }
        }
      });
    }
  },
  methods: {
          // 发送短信
          infolistword() {
      var dictType = "text_message_remind";
      getAgencytype(dictType).then((res) => {
        this.optionslist = res.data;
        // this.taskinfo();
      });
    },

    // 短信
    messageontemplateMESSAGE(item) {
      console.log(item, "2222222");
      this.formlist.phoneMessageTemplateId = item.templateId;
      this.formlist.phoneMessageTemplateName = item.templateName;
      // this.form.messagePreview = item.templateContent;
    },
    // 重复次数
    infolistMESSAGE() {
      var dictType = "redial_times";
      getAgencytype(dictType).then((res) => {
        this.optionslistS = res.data;
      });
    },
    // 宣教
    getPropagandaLIST() {
      getPropaganda(this.$route.query.templateId).then((response) => {
        this.formview = response.data;
        this.formview.materialsInfoList.forEach((e) => {
          this.materialsType = e.materialsType;
          this.materialsFilePath = e.materialsFilePath;
        });
      });
    },
    // 问卷和随访
    selectlist() {
      selectPatientQuestionSubmit(this.$route.query.patientId).then((res) => {
        console.log(res, "res");
        this.questiondata = res.data;
        if (this.$route.query.routeHandleRemark) {
          this.questiondata.routeHandleRemark =
            this.$route.query.routeHandleRemark;
        }

        this.questiondata.subjectResultList.forEach((e) => {
          e.optionResults.forEach((el) => {
            // console.log(el, "el");
            if (
              (el.optionChooseSign == "0" &&
                e.questionType == "MULTIPLE_CHOICE") ||
              e.questionType == "COMBINATION_RADIO_SUBJECT"
            ) {
              e.checked = el.id;
            } else if (
              el.optionChooseSign == "0" &&
              e.questionType == "MULTIPLE_CHOICE_QUESTIONS"
            ) {
              this.checkeddata.push(el.id);
            } else if (
              el.optionChooseSign == "0" &&
              e.questionType == "SCORING_QUESTIONS"
            ) {
              e.checked = el.id;
            } else if (
              e.questionType == "COMBINATION_MULTIPLE_SUBJECT" &&
              el.optionChooseSign == "0"
            ) {
              this.checkeddata.push(el.id);
            }
          });
        });
      });
    },
    // 日期填空题
    timepicker(e, index) {
      this.questiondata.questionSubjectList[index].optionAnswer = e;
    },
    // 时间填空题
    timepickerselect(e, index) {
      console.log(e);
      this.questiondata.questionSubjectList[index].optionAnswer = e;
    },

    radioGroupChange(e, item) { },
    // 选中某个单选框时，由radio时触发
    radioChange(e, item, index) {
      console.log(e, item, index, "选中某个单选框时");
      this.questiondata.questionSubjectList[
        index
      ].questionSubjectOptionList.forEach((el) => {
        if (el.id == item.id) {
          el.optionChooseSign = "0";
        } else {
          el.optionChooseSign = "1";
        }
      });
    },
    // 复选框
    radioChangecheck(e, item, index, aindex) {
      console.log(e, item, index, "选中某个复选框时");
      if (e == true) {
        this.questiondata.questionSubjectList[index].questionSubjectOptionList[
          aindex
        ].optionChooseSign = "0";
      } else {
        this.questiondata.questionSubjectList[index].questionSubjectOptionList[
          aindex
        ].optionChooseSign = "1";
      }
      console.log(this.questiondata, "11111111复选框");
    },

    info() {
      selectVisitRecord(this.$route.query.patientId).then((res) => {
        console.log(res);
        this.list = res.data;
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep iframe{
    width:100%;
    height: 500px;
}
.tk {
  ::v-deep .el-textarea__inner {
    margin: 20px 0 10px 30px;
  }
}

::v-deep .el-radio {
  padding: 10px;
}

::v-deep .el-checkbox-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0px 10px 24px;
}

::v-deep .el-checkbox {
  padding: 10px 0 10px 0px;
  // padding: 10px;
}

.custom-radio-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 10px;

  .custom {
    padding: 10px 0 10px 10px;
  }
}

.custom-radio-group {
  display: flex;
  flex-direction: column;
  padding: 10px 0 10px 10px;

  .custom {
    padding: 10px 0 10px 10px;
  }
}

.bodytop {
  position: relative;
  top: 20px;
  height: 500px;
  width: 600px;
  margin: 0 auto;
  // background: red;f
  overflow: auto;
  border: 1px solid #e2e2e2;

  .titledata {
    margin: 30px 0px 15px 30px;
    top: 14px;
    font-size: 20px;
  }

  .audiotop {
    margin: 10px 0px 10px 30px;
  }

  img {
    // width: 362px;
    // height: 127px;
    margin: 0px 0px 0px 30px;
  }

  video {
    margin: 0px 0px 0px 30px;
  }

  .know {
    margin: 11px 0px 10px 30px;
    font-size: 20px;
    font-weight: 550;
  }

  .knowlist {
    margin: 10px 0px 10px 30px;
    font-size: 16px;
  }
}

.right {
  width: 70%;
  height: 500px;
  // background: yellow;
}

.header {
  background-color: #f1f3f5;
  padding-top: 10px;

  ::v-deep .el-tabs__header {
    margin: 0 !important;
    width: 100%;
    // overflow: auto;
    // height: 500px;
    // background: red;
  }

  .bottomheader {
    overflow-y: scroll;
    width: 99%;
    height: 67vh;
    background-color: #fff;
    margin: 10px auto;
    padding: 10px 20px;

    .sport {
      padding: 10px 50px 10px 10px;
      font-size: 20px;
      font-weight: 600;
    }

    .words {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }

    .sports {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      font-size: 18px;
      font-weight: 600;
    }

    .word {
      font-size: 14px;
      font-weight: 550;
      padding: 50px 50px 10px 10px;
    }

    .videoleft {
      width: 40%;
      height: 200px;
      background: red;
    }

    .time {
      font-size: 20px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }

    .number {
      width: 25px;
      height: 25px;
      text-align: center;
      display: inline-block;
      color: white;
      background: blue;
      border-radius: 50%;
    }

    .nexttime {
      font-size: 15px;
      padding: 10px 50px 10px 10px;
    }

    .images {
      width: 53%;
      height: 241px;
      margin: 0 auto;
      background: red;
    }

    .attention {
      font-size: 14px;
      font-weight: 550;
      padding: 10px 50px 10px 10px;
    }

    // .videobottom
    // {
    //   font-size: 14px;
    //   font-weight: 550;
    //   padding: 10px 50px 10px 10px;
    // }
  }

  .topheader {
    width: 99%;
    background-color: #fff;
    margin: 0 auto;

    .information {
      display: flex;
      flex-wrap: wrap;
      padding: 10px 20px;
      height: 110px;

      .top,
      .bottom {
        color: #666666;
        width: 100%;
        display: flex;

        div {
          width: 25%;
        }
      }
    }

    .user {
      width: 100%;
      padding: 0 20px;
      display: flex;
      height: 80px;
      align-items: center;
      line-height: 80px;

      .source {
        display: flex;

        .item {
          line-height: 30px;
          font-size: 14px;
          margin-left: 20px;
          border: 1px solid #c7c7c7;
          width: 100px;
          border-radius: 5px;
          justify-content: center;
          height: 30px;
          display: flex;
          align-items: center;

          img {
            margin-right: 10px;
            width: 20px;
            height: 20px;
          }
        }
      }

      .name {
        font-size: 20px;
        padding-left: 12px;
      }

      .gender {
        padding-left: 10px;
      }

      .age {
        padding-left: 10px;
      }

      .headsculpture {
        border-radius: 50%;
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>