This commit is contained in:
zoujiandong
2025-05-29 17:01:07 +08:00
parent 1ee5968dfe
commit 6684bf1e29
23 changed files with 2834 additions and 39 deletions
+324
View File
@@ -0,0 +1,324 @@
<template>
<view class="upage">
<navBar></navBar>
<view class="databox">
<view class="cell">
<view class="num">11</view>
<view class="name">文章</view>
</view>
<view class="cell">
<view class="num">22</view>
<view class="name">视频</view>
</view>
<view class="cell">
<view class="num">333</view>
<view class="name">阅读量</view>
</view>
</view>
<view class="bar"></view>
<view class="box">
<view class="special">
<view class="titlebox">
<view class="title">精选病例</view>
<view class="more" @click="goList">
<view class="morename">查看更多</view>
<u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
</view>
</view>
<view class="list">
<view class="cell">
<view class="circle"></view>
<view class="title">肝胆相照临床病例库肝胆相照临床病例库</view>
</view>
</view>
</view>
<view class="bar"></view>
<view class="record">
<view class="titlebox">
<view class="title">精选病例</view>
<view class="more" @click="goList">
<view class="morename">查看更多</view>
<u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
</view>
</view>
<view class="list">
<view class="cell">
<view class="title">肝胆相照临床病例库肝胆相照临床病例库肝胆</view>
<view class="doctor">
<up--image :src="headImg" width="46rpx" height="46rpx" radius="50%"></up--image>
<view class="name">陈XX(首都医科大学附属北京**医院)</view>
</view>
<view class="content">
嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎XXXXX
</view>
<view class="imgbox">
<view class="imgcell">
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10" width="220rpx"
height="220rpx">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</up--image>
</view>
<view class="imgcell">
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10" width="220rpx"
height="220rpx">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</up--image>
</view>
<view class="imgcell">
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10" width="220rpx"
height="220rpx">
<view slot="error" style="font-size: 24rpx;">加载失败</view>
</up--image>
</view>
</view>
<view class="imgbox">
<video class="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
@error="videoErrorCallback" controls></video>
</view>
<view class="tagbox">
<view class="tag">标签</view>
</view>
<view class="deal">
<view class="left">
<view class="eyebox item">
<up-icon name="eye" color="#4B5563" size="28rpx"></up-icon>
<view class="num">11</view>
</view>
<view class="collect item">
<up-icon name="heart" color="#4B5563" size="28rpx"></up-icon>
<view class="num">22</view>
</view>
<view class="chat item">
<up-icon name="chat" color="#4B5563" size="28rpx"></up-icon>
<view class="num">22</view>
</view>
</view>
<view class="time">
<up-icon name="clock" color="#4B5563" size="28rpx"></up-icon>
<view class="num">{{formatdate('2022-10-23') }}</view>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<tabBar :value="2"></tabBar>
</template>
<script setup>
import navBar from "@/components/navBar/navBar.vue";
import tabBar from "@/components/tabBar/tabBar.vue";
import headImg from "@/static/headImg.png";
import dayjs from "dayjs";
const formatdate = (date) => {
return dayjs(date).format('YYYY-MM-DD')
};
const goList = () => {
uni.navigateTo({
url: '/pages/specialList/specialList'
})
};
const videoErrorCallback = (e) => {
uni.showModal({
content: e.target.errMsg,
showCancel: false
})
};
</script>
<style lang='scss' scoped>
.upage {
display: flex;
flex-direction: column;
height: calc(100vh - 100rpx);
}
.box {
flex: 1;
padding-bottom: 30rpx;
overflow-y: scroll;
}
.myVideo {
width: 100%;
border-radius: 15rpx;
}
.deal {
margin-top: 20rpx;
display: flex;
color: #4B5563;
font-size: 24rpx;
justify-content: space-between;
.left {
display: flex;
align-items: center;
.item {
width: 100rpx;
}
}
.collect {
display: flex;
align-items: center;
}
.eyebox,
.chat {
display: flex;
align-items: center;
}
.time {
display: flex;
align-items: center;
}
.num {
margin-left: 8rpx;
}
}
.tagbox {
margin-top: 24rpx;
display: flex;
.tag {
height: 54rpx;
padding: 0 28rpx;
background: #ECFAF9;
border-radius: 30rpx;
font-size: 27rpx;
color: #3CC7C0;
display: flex;
align-items: center;
justify-content: center;
}
}
.doctor {
display: flex;
align-items: center;
}
.record {
padding-top: 30rpx;
.list {
margin: 30rpx 30rpx;
.name {
margin: 20rpx 0 20rpx 15rpx;
font-size: 27rpx;
color: #333333;
}
.content {
font-size: 27rpx;
color: #666666;
line-height: 38rpx;
}
.imgbox {
display: flex;
margin-top: 24rpx;
.imgcell {
width: 220rpx;
height: 220rpx;
margin-right: 20rpx;
}
.imgcell:last-child {
margin-right: 0;
}
}
}
}
.special {
padding-top: 30rpx;
.list {
margin: 8rpx 30rpx 0;
.cell {
padding: 22rpx 0;
display: flex;
border-bottom: 2rpx solid #f3f4f6;
.circle {
margin-top: 15rpx;
width: 15rpx;
height: 15rpx;
background: #3cc7c0;
border-radius: 50%;
}
.title {
margin-left: 10rpx;
font-size: 32rpx;
color: #000000;
line-height: 46rpx;
}
}
.cell:last-child {
border-bottom: none;
}
}
}
.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;
}
}
}
.bar {
height: 16rpx;
background: #f3f4f6;
}
.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>