324 lines
6.5 KiB
Vue
324 lines
6.5 KiB
Vue
<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> |