case-data/pages/my/my.vue

<template>
  <div class="upage">
    <dNav></dNav>
    <view class="con">
      <view class="infobox">
      <up--image
        :src="headImg"
        width="154rpx"
        height="154rpx"
        radius="50%"
      ></up--image>
      <view class="info">
        <view class="name">
            张三（主任医师）
        </view>
        <view class="hospital">首都医科大学附属北京**医院</view>

      </view>
    </view>
    <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="listbox">
        <view class="titlename">我的临床病例库</view>
        <view class="cell" @click="goDoctor">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">我的病例库</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="goCert">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">临床病例库收录证书下载</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="goHospital">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">XXXX医院临床病例库</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="mySpecial">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">我的病例交流</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
         <view class="cell" @click="goJoin">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">我的参与互动</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>
        <view class="cell" @click="goCollect">
           <view class="left">
             <u-icon name="chat-fill" color="#000" size="28"></u-icon>
            <view class="title">浏览与收藏</view>
           </view>
            <u-icon name="arrow-right" color="#9CA3AF" size="18"></u-icon>
        </view>


    </view>
    </view>
    <view class="publish" @click="goPublish">
      <u-icon name="plus" color="#fff" size="18"></u-icon>
    </view>
  </div>
</template>

<script setup>
import dNav from "@/components/backNav/backNav.vue";
import headImg from "@/static/headImg.png";
const goCert = () => {
  uni.navigateTo({
    url: "/pages/certList/certList",
  });
};
const goDoctor=()=>{
	uni.navigateTo({
		url:'/pages/searchList/searchList?type=doctor'
	})
}
const goHospital=()=>{
	uni.navigateTo({
		url:'/pages/searchList/searchList?type=hospital'
	})
}
const mySpecial=()=>{ 
  uni.navigateTo({
    url:'/pages/specialList/specialList'
  })
}
const goJoin=()=>{
	uni.navigateTo({
		url:'/pages/myJoin/myJoin'
	})
}
const goCollect=()=>{
	uni.navigateTo({
		url:'/pages/myCollect/myCollect'
	})
}
const goPublish=()=>{
	uni.navigateTo({
		url:'/pages/publish/publish'
	})
}
</script>
<style lang='scss' scoped>
.upage{
  height:100vh;
  display: flex;
  flex-direction: column;
}
.con{
  height:calc(100vh - 100rpx);
  overflow-y: scroll;
}
.publish{
	width: 92rpx;
	height: 92rpx;
	background: #3CC7C0;
	border-radius: 50%;
	position: fixed;
  right:30rpx;
  bottom:100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.listbox{
    margin:34rpx 30rpx 0;
    .titlename{
      margin-bottom: 30rpx;
    }
    .cell{
      height: 108rpx;
        padding:0 30rpx;
         margin-bottom: 30rpx;
      background: #F9FAFB;
     border-radius: 15rpx;
     display: flex;
     justify-content: space-between;
     align-items: center;
        .left{
             display: flex;
          justify-content: space-between;
        font-size: 32rpx;
         color: #000000;
         .title{
          margin-top: 4rpx;
          margin-left: 8rpx;
         }
        }
        
    }
}
.databox {
  height: 162rpx;
  background: #ffffff;
  display: flex;
  padding: 10rpx 0rpx;
  justify-content: space-between;
  border-bottom:2rpx solid rgba($color: #000000, $alpha: 0.1);
  .cell {
    flex: 1;
    padding: 35rpx 0;

    text-align: center;

    .num {
      font-size: 38rpx;
      color: #000000;
    }
    .name {
      margin-top: 18rpx;
      font-size: 28rpx;
      color: #4B5563;
    }
  }
}
.infobox{
    margin:0 30rpx;
  display: flex;
  .info{
    margin-left: 20rpx;
    .name{
        font-size: 32rpx;
        color: #000000;
        line-height: 46rpx;
    }
    .hospital{
        font-size: 28rpx;
        color: #4B5563;
        line-height: 38rpx;}
  }
}
</style>