<template>
  <div id="con">
    <div class="top flex">
      <div class="left box">
        <video :src="videoSrc" controls class="video" />
      </div>
      <div class="right box tabbox">
        <el-tabs v-model="curTab">
          <el-tab-pane
            v-for="(e, index) in tabList"
            :key="index"
            :label="e.title"
            :name="e.title"
          >
            <ul class="tabslist">
              <li v-for="(item, index) in noticeList" :key="index">
                <div class="left">
                  <div class="circle"></div>
                  {{ item.title }}
                </div>
                <div class="right">
                  {{ item.date }}
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <!-- 数据分析 -->
    <div class="dataAnalysis">
      <div class="title_box">
        <div class="title">数据分析</div>
        <div class="empty"></div>
      </div>
      <div class="flex">
        <div class="left box cenbox">
          <div class="box_title text-center">联盟地图</div>
          <img class="map" src="~@/assets/img/Home/map.png" alt="" />
        </div>
        <div class="right box cenbox cenboxs" style="background: transparent">
          <div class="range">
            <div class="box_title text-center">累计上报量机构排名</div>
            <div class="rangecontent">
              <div class="top10"></div>
              <ul class="rangeList">
                <li
                  v-for="(item, index) in rangeList"
                  :key="index"
                  :style="{ color: index < 3 ? '#4E68FF' : '#333333' }"
                >
                  <div>{{ index + 1 }}</div>
                  <div>{{ item.name }}</div>
                  <div>{{ item.value }}</div>
                </li>
              </ul>
            </div>
          </div>
          <div class="range">
            <div class="box_title text-center">当前季度上报量机构排名</div>
            <div class="rangecontent">
              <div class="top10"></div>
              <ul class="rangeList">
                <li
                  v-for="(item, index) in rangeList"
                  :key="index"
                  :style="{ color: index < 3 ? '#4E68FF' : '#333333' }"
                >
                  <div>{{ index + 1 }}</div>
                  <div>{{ item.name }}</div>
                  <div>{{ item.value }}</div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 健康科普 -->
    <div class="healthPopularization">
      <div class="title_box">
        <div class="title">健康科普</div>
        <div class="empty"></div>
      </div>
      <ul class="typeList">
        <li
          v-for="(item, index) in typeList"
          :key="index"
          :style="{ backgroundImage: 'url(' + item.src + ')' }"
          @click="
            $router.push({
              path: '/healthpopularization',
              query: { tabIndex: index },
            })
          "
        >
          {{ item.name }}
        </li>
      </ul>
    </div>
    <!--  科学研究 -->
    <div class="scientificresearch">
      <div class="title_box">
        <div class="title">科学研究</div>
        <div class="empty"></div>
      </div>
      <ul class="researchList">
        <li
          v-for="(item, index) in researchList"
          :key="index"
          @click="
            $router.push({
              path: '/scientificresearch',
              query: { tabIndex: index },
            })
          "
        >
          {{ item }}
        </li>
      </ul>
    </div>
    <!-- 粘性定位 -->
    <div v-show="showFixed" class="fixed_box">
      <ul class="f_list">
        <li v-for="(item, index) in rigBarList" :key="index">
          <img :src="item.src" alt="" /><span>{{ item.name }}</span>
        </li>
        <li class="qrc_Box">
          <div class="qr_name">问题反馈群</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // videoSrc: require("../../../public/aaa.mp4"),
      videoSrc: "",
      tabList: [
        {
          title: "新闻会议",
        },
        {
          title: "通知公告",
        },
        {
          title: "学术动态",
        },
      ],
      noticeList: [
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
        {
          title: "典型案例小标题典型案例小标题",
          date: "2022-09-26",
        },
      ],
      curTab: "新闻会议",
      rangeList: [
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "温州市中心医院", value: 222 },
        { name: "南方医科大学南海医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
        { name: "包头医学院第二附属医院", value: 12345 },
      ],
      typeList: [
        {
          src: require("@/assets/img/Home/shaicha.png"),
          name: "筛查",
          route: "/healthpopularization",
        },
        {
          src: require("@/assets/img/Home/shenghuo.png"),
          name: "生活",
        },
        {
          src: require("@/assets/img/Home/yixuezhishi.png"),
          name: "医学知识",
        },
        {
          src: require("@/assets/img/Home/qita.png"),
          name: "其他",
        },
      ],
      rigBarList: [
        {
          src: require("@/assets/img/Home/kefu.png"),
          name: "客服",
        },
        {
          src: require("@/assets/img/Home/youxiang.png"),
          name: "邮箱",
        },
        {
          src: require("@/assets/img/Home/dizhi.png"),
          name: "地址",
        },
      ],
      researchList: ["筛查技术方案", "筛查指南", "学术成果", "项目进展与成果"],
      showFixed: false,
    }
  },
  watch: {},
  mounted() {
    console.log(document.querySelector("#vue-admin-beautiful"))
    document
      .querySelector("#vue-admin-beautiful")
      .addEventListener("scroll", () => {
        let scrollTop = document.querySelector("#vue-admin-beautiful").scrollTop
        if (scrollTop >= 700) {
          this.showFixed = true
        } else {
          this.showFixed = false
        }
      })
  },
  methods: {},
}
</script>
<style lang="scss" scoped>
#con {
  .flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 38px;
    .box {
      width: 48%;
      height: 300px;
      // background: blue;
      background: #fff;
      .video {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .tabbox {
      padding: 8px 16px;
      overflow: hidden;
      .tabslist {
        height: 220px;
        padding-right: 8px;
        overflow: auto;
        li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          font-family: AlibabaPuHuiTiR;
          color: #666666;
          margin-bottom: 16px;
          cursor: pointer;
          .left {
            display: flex;
            align-items: center;
            .circle {
              width: 4px;
              height: 4px;
              background: #7085fe;
              border-radius: 50%;
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
  .dataAnalysis {
    .box_title {
      width: 180px;
      height: 36px;
      background: #4e68ff;
      border-radius: 0px 0px 4px 4px;
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      color: #ffffff;
      margin: 0 auto;
      line-height: 36px;
    }
    .cenbox {
      height: 458px;
      // background: url("~@/assets/img/Home/map.png") no-repeat center center;
      // background-size: cover;
      .map {
        width: 100%;
        height: 422px;
        object-fit: contain;
      }
    }
    .cenboxs {
      display: flex;
      justify-content: space-between;

      .range {
        width: 46%;
        background: #ffffff;
        border-radius: 4px;
        border: 1px solid #d2d7f5;
        padding: 0 7px;
        .rangecontent {
          margin-top: 6px;
          height: 408px;
          background: rgba(78, 104, 255, 0.06);
          border-radius: 4px;
          padding: 8px;
          font-size: 14px;
          font-family: AlibabaPuHuiTiM;
          // color: #4e68ff;
          .rangeList {
            li {
              margin-bottom: 14px;
              display: flex;
              justify-content: space-between;
              div:nth-child(1) {
                width: 20px;
              }
              div:nth-child(2) {
                flex: 1;
              }
              div:nth-child(3) {
                text-align: right;
              }
            }
          }
        }
        .top10 {
          height: 32px;
          background: url("~@/assets/img/Home/top10.png") no-repeat center
            center;
          background-size: contain;
          margin-bottom: 8px;
        }
      }
    }
  }
  .healthPopularization {
    margin-bottom: 38px;
    .typeList {
      display: flex;
      justify-content: space-between;
      li {
        cursor: pointer;
        width: 22%;
        height: 188px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 24px;
        color: #ffffff;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
      }
    }
  }
  .scientificresearch {
    .researchList {
      display: flex;
      margin-bottom: 20px;
      li {
        width: 188px;
        height: 64px;
        background: #ffffff;
        box-shadow: 0px 4px 1px 1px #3d58f9;
        text-align: center;
        line-height: 64px;
        border-radius: 4px;
        border: 1px solid rgba(78, 104, 255, 0.12);
        font-size: 16px;
        font-family: AlibabaPuHuiTiM;
        color: #333333;
        margin-right: 20px;
        cursor: pointer;
      }
    }
  }
  .title_box {
    display: flex;
    margin-bottom: 24px;
    .title {
      width: 64px;
      height: 30px;
      font-size: 16px;
      font-family: AlibabaPuHuiTiM;
      color: #4e68ff;
      line-height: 22px;
      border-bottom: 2px solid #4e68ff;
    }
    .empty {
      flex: 1;
      height: 30px;
      border-bottom: 2px solid #ffffff;
    }
  }
  .fixed_box {
    background: #fff;
    position: fixed;
    padding: 20px 10px;
    right: 30px;
    bottom: 300px;
    z-index: 1000;
    .f_list {
      li {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
        }
        span {
          width: 28px;
          font-size: 14px;
          font-family: AlibabaPuHuiTiR;
          color: #333333;
        }
      }
      .qrc_Box {
        right: 0;
        display: block;
        position: absolute;
        width: 180px;
        height: 214px;
        background: #546184
          linear-gradient(225deg, #707c9c 0%, #94a0c1 0%, #546184 100%);
        border-radius: 4px;
        padding: 10px;
        text-align: center;
        .qr_name {
          width: 100%;
          height: 24px;
          font-size: 18px;
          font-family: AlibabaPuHuiTiM;
          color: #ffffff;
          line-height: 24px;
        }
      }
    }
  }
}
</style>