184 lines
3.1 KiB
Vue
184 lines
3.1 KiB
Vue
<template>
|
|
<view class="app">
|
|
<view class="record">
|
|
<view class="time">
|
|
<text>2022-10-11 15:44</text>
|
|
<text class="service">服务中</text>
|
|
</view>
|
|
<view class="recordinfo">
|
|
<view class="img">
|
|
</view>
|
|
<view class="texts">
|
|
<text class="name">某某某</text>
|
|
<view class="doctor">
|
|
<text>内科门诊-主任医师</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="Apayment">
|
|
<view class="pay">
|
|
<text class="money">实付款:</text>
|
|
<text class="price">￥28.0</text>
|
|
</view>
|
|
|
|
<view class="result">
|
|
查看结果
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="record">
|
|
<view class="time">
|
|
<text>2022-10-11 15:44</text>
|
|
<text class="service">服务中</text>
|
|
</view>
|
|
<view class="recordinfo">
|
|
<view class="img">
|
|
</view>
|
|
<view class="texts">
|
|
<text class="name">某某某</text>
|
|
<view class="doctor">
|
|
<text>内科门诊-主任医师</text>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="Apayment">
|
|
<view class="pay">
|
|
<text class="money">实付款:</text>
|
|
<text class="price">￥28.0</text>
|
|
</view>
|
|
|
|
<view class="result">
|
|
查看结果
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
}
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.app {
|
|
background-color: #F4F5F7;
|
|
width: 100%;
|
|
height: 100vh;
|
|
position: relative;
|
|
padding: 4%;
|
|
|
|
.record {
|
|
width: 99%;
|
|
height: 427rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
|
|
border-radius: 20rpx;
|
|
margin-bottom: 10rpx;
|
|
|
|
.time {
|
|
width: 90%;
|
|
height: 80rpx;
|
|
font-size: 30rpx;
|
|
margin: 0 auto;
|
|
color: #969394;
|
|
line-height: 80rpx;
|
|
border-bottom: 1rpx solid #D8D4D4;
|
|
|
|
.service {
|
|
height: 67rpx;
|
|
color: #4C7BC9;
|
|
line-height: 67rpx;
|
|
margin-left: 45%;
|
|
// float: left;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.recordinfo {
|
|
width: 90%;
|
|
height: 230rpx;
|
|
// background-color: red;
|
|
margin: 0 auto;
|
|
display:flex;
|
|
|
|
.img {
|
|
width: 169rpx;
|
|
height: 171rpx;
|
|
background: #BFBFBF;
|
|
margin-top: 3%;
|
|
border-radius: 25rpx;
|
|
}
|
|
|
|
.texts {
|
|
|
|
margin-top: 7%;
|
|
// width: 169rpx;
|
|
height: 171rpx;
|
|
margin-left: 6%;
|
|
// background: #BFBFBF;
|
|
.name{
|
|
height: 70rpx;
|
|
font-size: 38rpx;
|
|
|
|
|
|
color: #000000;
|
|
line-height: 70rpx;
|
|
}
|
|
.doctor{
|
|
height: 60rpx;
|
|
font-size: 35rpx;
|
|
color: #969394;
|
|
line-height: 60rpx;
|
|
}
|
|
}
|
|
}
|
|
.Apayment{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
// background-color: red;
|
|
display: flex;
|
|
.money{
|
|
|
|
height: 29rpx;
|
|
font-size: 30rpx;
|
|
color: #969394;
|
|
line-height: 29rpx;
|
|
// margin-top: -40px;
|
|
}
|
|
.price{
|
|
font-family: Adobe Heiti Std;
|
|
font-weight: normal;
|
|
line-height: 29rpx;
|
|
height: 29rpx;
|
|
font-size: 41rpx;
|
|
color: #000000;
|
|
line-height: 77rpx;
|
|
}
|
|
.result{
|
|
width: 217rpx;
|
|
height: 68rpx;
|
|
line-height: 68rpx;
|
|
background: #4C7BC9;
|
|
font-size: 32rpx;
|
|
border-radius: 26rpx;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
margin-left: 30%;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|