<template>
|
<div class="page">
|
<div class="hader">
|
<div class="listrow">
|
<div class="rowioc">
|
<van-image
|
round
|
width="50px"
|
height="50px"
|
src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
|
/>
|
</div>
|
<div class="rowtext">
|
用户名：1771723243242
|
</div>
|
</div>
|
</div>
|
<div class="userInfo">
|
<div style="padding-left: 20px; padding-top: 12px; padding-right: 20px;">
|
<van-row style="border-bottom: 1px solid #F1F1F2;margin-top: 12px;">
|
<van-col span="12" style="margin-bottom: 12px;">患者卡片</van-col>
|
<van-col span="12" style="text-align: right;padding-right: 25px;"> <van-icon name="arrow" /></van-col>
|
</van-row>
|
</div>
|
|
<van-row style="padding-left: 20px;">
|
<van-col span="16" class="info16">
|
<div class="div1">张三丰
|
<span class="but">排班提醒</span>
|
</div>
|
<div class="div2">患者卡号</div>
|
<div class="div3">000000001</div>
|
</van-col>
|
<van-col span="8" class="info8">
|
<div class="img">
|
<img
|
style=" width: 55px;height: 55px;margin-left: 8%; margin-top: 15px;"
|
referrerpolicy="no-referrer"
|
src="./imgs/erwm.png"
|
/>
|
<div class="devcc">出示称重码</div>
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
<div class="serves">
|
<div style="padding-left: 20px;">
|
<div class="title">其他服务</div>
|
<van-row>
|
<van-col span="6" class="serveItem">
|
<div>
|
<van-image
|
:src="serve1"
|
/>
|
</div>
|
<div>
|
我的用药
|
</div>
|
</van-col>
|
<van-col span="6" class="serveItem">
|
<div>
|
<van-image
|
:src="serve1"
|
/>
|
</div>
|
<div>
|
检验指标
|
</div>
|
</van-col>
|
<van-col span="6" class="serveItem">
|
<div>
|
<van-image
|
:src="serve1"
|
/>
|
</div>
|
<div>
|
科室公告
|
</div>
|
</van-col>
|
<van-col span="6" class="serveItem">
|
<div>
|
<van-image
|
:src="serve1"
|
/>
|
</div>
|
<div>
|
科室介绍
|
</div>
|
</van-col>
|
<van-col span="6" class="serveItem">
|
<div>
|
<van-image
|
:src="serve1"
|
/>
|
</div>
|
<div>
|
智慧云客服
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
</div>
|
<div class="ButtonBody">
|
<van-button type="primary" round block>退出登录</van-button>
|
</div>
|
<van-tabbar v-model="active" @change="tabChang">
|
<van-tabbar-item name="home" icon="like">首页</van-tabbar-item>
|
<van-tabbar-item name="my" icon="manager">我的</van-tabbar-item>
|
</van-tabbar>
|
</div>
|
</template>
|
<script lang="ts" setup>
|
import { ref } from 'vue'
|
import serve1 from './imgs/serve1.png'
|
import { Image as VanImage,Tabbar as VanTabbar , TabbarItem as VanTabbarItem} from 'vant'
|
import {useRouter} from 'vue-router'
|
const router=useRouter()
|
const active=ref('my')
|
const tabChang=(index:any)=>{
|
alert(index)
|
if (index==='home'){
|
router.push('/')
|
} else {
|
router.push('my')
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
body{
|
background-color:#166bd3;
|
}
|
.page{
|
background-color:#F6FAFF;
|
position:relative;
|
min-width: 375px;
|
min-height: 800px;
|
.hader{
|
margin-top: 20px;
|
margin-bottom: 20px;
|
height: 50px;
|
width: 92%;
|
margin-left: 4%;
|
text-align:left;
|
.listrow{
|
grid-template-columns: minmax(50px, 20%) 1fr ;
|
display: grid;
|
.rowtext{
|
margin-top: 15px;
|
font-size: 13px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #777777;
|
}
|
}
|
.hader-regth{
|
height: 50px;
|
text-align:right;
|
line-height: 50px;
|
}
|
}
|
.userInfo{
|
width: 92%;
|
margin-left: 4%;
|
height: 160px;
|
background: #FFFFFF;
|
box-shadow: 0px 2px 4px 0px rgba(70,150,249,0.1);
|
border-radius: 5px;
|
.info16{
|
text-align: left;
|
// background:red;
|
.div1{
|
margin-top: 20px;
|
margin-bottom: 6px;
|
height: 21px;
|
font-size: 15px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #333333;
|
line-height: 21px;
|
.but{
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FDFDFD;
|
background:rgb(77, 124, 212);
|
border-radius: 8px;
|
height: 20px;
|
line-height: 20px;
|
font-size: 13px;
|
padding: 2px 8px;
|
}
|
}
|
.div2{
|
height: 17px;
|
font-size: 12px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #777777;
|
line-height: 17px;
|
}
|
.div3{
|
margin-top: 6px;
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #777777;
|
line-height: 20px;
|
}
|
|
}
|
}
|
.serves{
|
background: #FFFFFF;
|
border-radius: 8px;
|
align-self: center;
|
margin-top: 20px;
|
width: 92%;
|
margin-left: 4%;
|
padding-top: 12px;
|
// padding-left: 20px;
|
padding-bottom: 20px;
|
.title{
|
margin-top: 12px;
|
overflow-wrap: break-word;
|
color: rgba(51, 51, 51, 1);
|
font-size: 14px;
|
font-family: PingFangSC-Medium;
|
text-align: left;
|
white-space: nowrap;
|
line-height: 20px;
|
// margin-bottom: 20px;
|
}
|
.serveItem{
|
text-align: center;
|
margin-top: 20px;
|
font-size: 13px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
line-height: 20px;
|
}
|
}
|
}
|
.info8{
|
text-align: right;
|
padding-right: 40px;
|
border-left: #F1F1F2 solid 1px;
|
// background: #166bd3;
|
.devcc{
|
height: 14px;
|
font-size: 10px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #777777;
|
line-height: 14px;
|
}
|
}
|
.text{
|
background: #166bd3;
|
}
|
.ButtonBody{
|
margin-top: 20px;
|
width: 92%;
|
margin-left: 4%;
|
// background: #166bd3;
|
}
|
</style>
|
