<template>
  <navBar></navBar>
  <view class="page">
    <view class="databox">
      <view class="cell">
        <view class="num">123</view>
        <view class="name">文章</view>
      </view>
      <view class="cell">
        <view class="num">123</view>
        <view class="name">视频</view>
      </view>
      <view class="cell">
        <view class="num">123</view>
        <view class="name">阅读量</view>
      </view>
    </view>
    <view class="kubox">
      <view class="row">
        <up--image
        :src="videoImg"
        radius="20rpx"
        width="330rpx"
        height="176rpx"

      ></up--image>
       <up--image
        :src="sickImg"
       
         width="330rpx"
         radius="20rpx"
        height="176rpx"
      ></up--image>
        <!-- <view class="item">
          <u-icon name="order" size="28" color="#00919E"></u-icon>
          <view class="name">视频病例库</view>
        </view>
        <view class="item" style="background: #fef8f0; margin-right: 30rpx">
          <u-icon name="order" size="28" color="#F08500"></u-icon>
          <view class="name" style="color: #f08500">疾病病例库</view>
        </view> -->
      </view>
      <view class="row" style="margin-top: 30rpx">
         <up--image
        :src="hospitalImg"
        radius="20rpx"
        width="330rpx"
        height="176rpx"

      ></up--image>
       <up--image
        :src="doctorImg"
       
         width="330rpx"
         radius="20rpx"
        height="176rpx"
      ></up--image>
      </view>
    </view>
    <view class="newsbox">
      <view class="titlebox">
        <view class="title">最新上线</view>
        <view class="more">
          <view class="morename">查看更多</view>
          <u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
        </view>
      </view>
      <view class="listbox">
        <view class="cell">
          <view class="circle"></view>
          <view class="info">
            <view class="name">肝胆相照临床病例库肝胆相照临床病例库</view>
            <view class="tagsbox">
              <view class="tag">陈煜</view>
            </view>
          </view>
        </view>
        <view class="cell">
          <view class="circle"></view>
          <view class="info">
            <view class="name">肝胆相照临床病例库肝胆相照临床病例库</view>
            <view class="tagsbox">
              <view class="tag">陈煜</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="newsbox">
      <view class="titlebox">
        <view class="title">最多阅读</view>
        <view class="more">
          <view class="morename">查看更多</view>
          <u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
        </view>
      </view>
      <view class="listbox">
        <view class="cell">
          <view class="circle"></view>
          <view class="info">
            <view class="name">肝胆相照临床病例库肝胆相照临床病例库</view>
            <view class="tagsbox">
              <view class="tag">陈煜</view>
            </view>
          </view>
        </view>
        <view class="cell">
          <view class="circle"></view>
          <view class="info">
            <view class="name">肝胆相照临床病例库肝胆相照临床病例库</view>
            <view class="tagsbox">
              <view class="tag">陈煜</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="recbox">
      <view class="titlebox">
        <view class="title">医院病例库推荐</view>
        <view class="more">
          <view class="morename">查看更多</view>
          <u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
        </view>
      </view>
      <view class="list">
        <view class="cell"> 首都医科大学附属北京佑安医院 </view>
		<view class="cell"> 首都医科大学附属北京佑安医院 </view>
      </view>
    </view>
	<view class="recbox">
      <view class="titlebox">
        <view class="title">医生病例库推荐</view>
        <view class="more">
          <view class="morename">查看更多</view>
          <u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
        </view>
      </view>
      <view class="list">
        <view class="cell"> 首都医科大学附属北京佑安医院 </view>
		<view class="cell"> 首都医科大学附属北京佑安医院 </view>
      </view>
    </view>
  </view>

  <tabBar></tabBar>
</template>

<script setup>
import { ref, reactive } from "vue";
import { onLoad} from "@dcloudio/uni-app";
import tabBar from "@/components/tabBar/tabBar.vue";
import navBar from "@/components/navBar/navBar.vue";
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
import api from "@/api/api";
const paging = ref(null);
const dataList = ref([]);
import videoImg from "@/static/video.png";
import sickImg from "@/static/sick.png";
import hospitalImg from "@/static/hospital.png";
import doctorImg from "@/static/doctor.png";

onLoad(() => {});
const queryList = (pageNo, pageSize) => {
  const params = {
    pageNo: pageNo,
    pageSize: pageSize,
    type: 1,
  };
  // 此处请求仅为演示，请替换为自己项目中的请求
  api
    .queryList(params)
    .then((res) => {
      // console.log(res)
      // dataList.value=dataList.value.concat(res.data.list)
      // 将请求结果通过complete传给z-paging处理，同时也代表请求结束，这一行必须调用
      paging.value.complete(res.data.list);
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false);
      // 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false);
    });
};
</script>
<style lang="scss" scoped>
 .tagsbox {
    margin-top: 20rpx;
    display: flex;
    .tag {
      padding: 0 10rpx;
      margin-right: 16rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center;
      background: rgba(60, 199, 192, 0.1);
      border-radius: 8rpx;
      font-weight: 400;
      font-size: 24rpx;
      color: #3cc7c0;
    }
  }
.newsbox {
  margin-bottom: 16rpx;
}
.recbox{
	padding-bottom: 23rpx;
  padding-top: 36rpx;
  background: #fff;
  .cell {
    margin: 23rpx 30rpx 0;;
    padding: 34rpx;
    background: #f3f4f6;
    font-size: 30rpx;
    color: #4b5563;
    line-height: 43rpx;
    border-radius: 15rpx;
  }
}
.listbox {
  .cell {
    margin: 0 30rpx;
    display: flex;
    align-items: flex-start;
    border-bottom: 1rpx solid #f3f4f6;
    padding: 34rpx 0;
    .circle {
      margin-right: 30rpx;
      margin-top: 18rpx;
      width: 16rpx;
      height: 16rpx;
      background: #3cc7c0;
      border-radius: 50%;
    }
    .name {
      font-size: 32rpx;
      color: #000000;
      line-height: 46rpx;
    }
    .author {
      font-size: 28rpx;
      color: #4b5563;
      line-height: 38rpx;
    }
  }
}
.titlebox {
  margin: 0 30rpx;
  display: flex;
  justify-content: space-between;
  .more {
    display: flex;
    align-items: center;
    .morename {
      margin-right: 10rpx;
      font-size: 28rpx;
      color: #3cc7c0;
    }
  }
}
.newsbox {
  padding-top: 36rpx;
  background: #fff;
}
.page {
  background: #f9fafb;
  min-height: 100vh;
}
.kubox {
  padding: 30rpx 0;
  width: 100%;
  background: rgba(0, 0, 0, 0);
  .row {
    padding:0 30rpx;
    display: flex;
    justify-content: space-between;
    .item {
      margin-left: 30rpx;
      padding: 32rpx;
      flex: 1;
      background: #e9fafb;
      border-radius: 15rpx;
      .name {
        font-size: 32rpx;
        color: #00919e;
        line-height: 46rpx;
      }
    }
  }
}
.databox {
  height: 162rpx;
  background: #ffffff;
  display: flex;
  padding: 0 30rpx;
  justify-content: space-between;
  .cell {
    flex: 1;
    padding: 35rpx 0;

    text-align: center;

    .num {
      font-size: 38rpx;
      color: #3cc7c0;
    }
    .name {
      margin-top: 18rpx;
      font-size: 28rpx;
      color: #4b5563;
    }
  }
}
</style>