267 lines
7.3 KiB
Vue
267 lines
7.3 KiB
Vue
<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">
|
||
<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">
|
||
<view class="item" style="background: #eff8ff">
|
||
<u-icon name="order" size="28" color="#1776D6"></u-icon>
|
||
<view class="name" style="color: #1776d6">医院病例库</view>
|
||
</view>
|
||
<view class="item" style="background: #fef0eb; margin-right: 30rpx">
|
||
<u-icon name="order" size="28" color="#EE4C1F"></u-icon>
|
||
<view class="name" style="color: #ee4c1f">医生病例库</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="author">端重排 | 陈煜 | 工商局</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="circle"></view>
|
||
<view class="info">
|
||
<view class="name">肝胆相照临床病例库肝胆相照临床病例库</view>
|
||
<view class="author">端重排 | 陈煜 | 工商局</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="author">端重排 | 陈煜 | 工商局</view>
|
||
</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="circle"></view>
|
||
<view class="info">
|
||
<view class="name">肝胆相照临床病例库肝胆相照临床病例库</view>
|
||
<view class="author">端重排 | 陈煜 | 工商局</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([]);
|
||
|
||
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>
|
||
.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 {
|
||
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> |