197 lines
3.3 KiB
Vue
197 lines
3.3 KiB
Vue
<template>
|
||
<view class="app">
|
||
<view class="top">
|
||
<view class="text">
|
||
肚子不舒服
|
||
</view>
|
||
<view class="price">
|
||
￥200
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bodys">
|
||
<view class="time">
|
||
时间
|
||
</view>
|
||
<view class="datatime">
|
||
<span>2023-09-21 13:30-14:00</span>
|
||
|
||
</view>
|
||
</view>
|
||
<view class="bottom">
|
||
<view class="time">
|
||
患者信息
|
||
</view>
|
||
<view class="info">
|
||
姓名：万鹏
|
||
</view>
|
||
<view class="info">
|
||
性别：男
|
||
</view>
|
||
<view class="info">
|
||
身份证号：372401199705254567
|
||
</view>
|
||
<view class="info">
|
||
手机号码：13454678907
|
||
</view>
|
||
<view class="info">
|
||
家庭住址：北京市昌平区振兴街幸福里
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
|
||
}
|
||
},
|
||
methods: {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
background: #F1F1F1;
|
||
height: 100vh;
|
||
|
||
.top {
|
||
display: flex;
|
||
width: 96%;
|
||
height: 102rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 14rpx;
|
||
position: relative;
|
||
left: 50%;
|
||
margin: 30rpx 0 30rpx 0;
|
||
line-height: 102rpx;
|
||
transform: translateX(-50%);
|
||
|
||
.text {
|
||
font-size: 32rpx;
|
||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
padding-left: 30rpx;
|
||
}
|
||
|
||
.price {
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 38rpx;
|
||
font-family: Adobe Heiti Std;
|
||
color: #EE2B2B;
|
||
|
||
|
||
}
|
||
|
||
}
|
||
|
||
.bodys {
|
||
width: 96%;
|
||
height: 200rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 14rpx;
|
||
margin: 30rpx 0 30rpx 0;
|
||
left: 50%;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
.time {
|
||
width: 96%;
|
||
padding-left: 30rpx;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
left: 50%;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
}
|
||
|
||
.datatime {
|
||
width: 690rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
background: #F7F9F8;
|
||
border-radius: 14rpx;
|
||
padding-left: 30rpx;
|
||
left: 50%;
|
||
top:18rpx;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
}
|
||
}
|
||
|
||
.bottom {
|
||
width: 96%;
|
||
height: 470rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 14rpx;
|
||
margin: 30rpx 0 30rpx 0;
|
||
left: 50%;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
.time {
|
||
width: 96%;
|
||
padding-left: 30rpx;
|
||
border-bottom: 1rpx solid #E6E6E6;
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
font-size: 28rpx;
|
||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
left: 50%;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
}
|
||
|
||
.datatime {
|
||
width: 690rpx;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
background: #F7F9F8;
|
||
border-radius: 14rpx;
|
||
padding-left: 30rpx;
|
||
left: 50%;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
}
|
||
|
||
.info {
|
||
width: 96%;
|
||
height: 72rpx;
|
||
line-height: 72rpx;
|
||
padding-left: 30rpx;
|
||
// background: red;
|
||
left: 50%;
|
||
position: relative;
|
||
transform: translateX(-50%);
|
||
|
||
font-size: 24rpx;
|
||
font-family: SourceHanSansSC-Medium, SourceHanSansSC;
|
||
font-weight: 500;
|
||
color: #333333;
|
||
|
||
}
|
||
|
||
}
|
||
|
||
}
|
||
</style> |