158 lines
3.1 KiB
Vue
158 lines
3.1 KiB
Vue
<template>
|
|
<view>
|
|
<view class="title-back" :style="{height:`${uni.getStorageSync('moveHeight')+40}px`}">
|
|
<view class="left-father" @click="uni.navigateBack();">
|
|
<image class="back-img" src="https://www.focusnu.com/media/directive/index/left.png" />
|
|
</view>
|
|
</view>
|
|
<view :style="{height:`${uni.getStorageSync('moveHeight') + 40}px`}"></view>
|
|
<image class="bacimg" src="https://www.focusnu.com/media/directive/bgyg.png" mode="aspectFill"></image>
|
|
<view class="xmname">
|
|
<image src="https://www.focusnu.com/media/directive/hts.png" mode="aspectFill" class="bgt"></image>
|
|
<image src="https://www.focusnu.com/media/directive/sj.png" mode="aspectFill" class="ava"></image>
|
|
<view class="name">李富贵</view>
|
|
<view class="xbjs">
|
|
女 | 80岁 | 2025.01.01
|
|
</view>
|
|
</view>
|
|
|
|
<view class="listacre">
|
|
<view class="top">
|
|
<view class="left">
|
|
<image src="https://www.focusnu.com/media/directive/dybb.png" mode="aspectFill"></image>
|
|
2026.03.01-2026.03.31
|
|
</view>
|
|
<view class="rits">计费</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.listacre{
|
|
width: 703rpx;
|
|
height: 349rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 40rpx;
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 33rpx;
|
|
margin: 21rpx auto 0;
|
|
.top{
|
|
width: 100%;
|
|
height: 80rpx;
|
|
position: relative;
|
|
background: yellow;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.rits{
|
|
width: 106rpx;
|
|
height: 45rpx;
|
|
background: #EEFBF6;
|
|
border-radius: 10rpx;
|
|
border: 1px solid #D3F0E4;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #01A763;
|
|
}
|
|
.left{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
image{
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.xmname{
|
|
width: 705rpx;
|
|
height: 155rpx;
|
|
margin: 20rpx auto 0;
|
|
position: relative;
|
|
z-index: 2;
|
|
.xbjs{
|
|
position: absolute;
|
|
top: 95rpx;
|
|
left: 143rpx;
|
|
z-index: 2;
|
|
font-weight: 400;
|
|
font-size: 23rpx;
|
|
color: #212327;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.name{
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #333333;
|
|
position: absolute;
|
|
top: 47rpx;
|
|
left: 143rpx;
|
|
z-index: 2;
|
|
}
|
|
.ava{
|
|
position: absolute;
|
|
width: 95rpx;
|
|
height: 95rpx;
|
|
border-radius: 50%;
|
|
top: 34rpx;
|
|
left: 30rpx;
|
|
z-index: 2;
|
|
}
|
|
.bgt{
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
.bacimg{
|
|
width: 100%;
|
|
height: 780rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 0;
|
|
}
|
|
.title-back {
|
|
background : rgba(255, 255, 255,0);
|
|
width: 100%;
|
|
height: 70rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-end;
|
|
padding-bottom: 20rpx;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.left-father {
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 1;
|
|
|
|
.back-img {
|
|
width: 45rpx;
|
|
height: 40rpx;
|
|
margin-left: 40rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
}
|
|
|
|
</style>
|