| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <!-- 头部盒子 --> |
| | | <div class="personages"> |
| | | <el-row :gutter="20"> |
| | | <el-col :span="4" :xs="24"> |
| | | <el-card class="box-card"> |
| | | <!-- <div slot="header" class="clearfix"> |
| | | <span>个人信息</span> |
| | | </div> --> |
| | | <div class="personage"> |
| | | <el-col :span="4" |
| | | ><div class="headportrait"> |
| | | <div class="text-center"> |
| | | <img v-imgError="require('@/assets/common/head.jpg')" src="" /> |
| | | </div> |
| | | <div class="information"> |
| | | <div class="info-xx"> |
| | | 吴龙 |
| | | <div class="xinz-inf">+新增标签</div> |
| | | </div> |
| | | <div class="info-xx">男<span>66岁</span></div> |
| | | <div class="info-xx">13803963330</div> |
| | | </div> |
| | | </div> |
| | | </el-card> |
| | | </el-col> |
| | | <el-col :span="18" :xs="24"> |
| | | <el-tabs |
| | | type="border-card" |
| | | v-model="activeName" |
| | | @tab-click="handleClick" |
| | | <div>吴大龙</div> |
| | | </div></el-col |
| | | > |
| | | <el-col :span="4" |
| | | ><div class="xinz-inf"> |
| | | <div class="addtag">+新增标签</div> |
| | | <div class="tagvalue">心血管</div> |
| | | </div></el-col |
| | | > |
| | | <el-col :span="4" |
| | | ><div class="info-xx">男<span>66岁</span></div></el-col |
| | | > |
| | | <el-col :span="4"><div class="info-xx">13803963330</div></el-col> |
| | | </el-row> |
| | | </div> |
| | | |
| | | <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick"> |
| | | <el-tab-pane name="health"> |
| | | <span class="mulsz" slot="label" |
| | | ><i class="el-icon-date"></i> 健康档案</span |
| | |
| | | 定时任务补偿</el-tab-pane |
| | | > |
| | | </el-tabs> |
| | | </el-col> |
| | | </el-row> |
| | | |
| | | <!-- 健康档案模块 --> |
| | | <div class="information-content" v-if="activeName == 'health'"> |
| | | <div class="top-message"> |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .personage { |
| | | .personages { |
| | | height: 88px; |
| | | width: 100%; |
| | | background-color: #2486b9; |
| | | border-radius: 5px; |
| | | padding: 20px; |
| | | margin-bottom: 10px; |
| | | line-height: 48px; |
| | | font-size: 25px; |
| | | font-weight: 600; |
| | | color: #ffffff; |
| | | .headportrait { |
| | | display: flex; |
| | | .text-center { |
| | | width: 40px; |
| | | height: 40px; |
| | | width: 55px; |
| | | height: 55px; |
| | | margin-right: 10px; |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | border-radius: 50%; |
| | | } |
| | | } |
| | | .information { |
| | | font-size: 25px; |
| | | .info-xx { |
| | | margin-top: 15px; |
| | | border-bottom: 2px solid rgb(65, 161, 190); |
| | | display: flex; |
| | | span { |
| | | margin-left: 30px; |
| | | } |
| | | .xinz-inf { |
| | | display: flex; |
| | | font-size: 18px; |
| | | cursor: pointer; |
| | | margin-left: 20px; |
| | | height: 23px; |
| | | line-height: 23px; |
| | | padding: 2px; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | color: rgb(85, 151, 250); |
| | | border: 1px solid #439fff; |
| | | border-radius: 9px; |
| | | } |
| | | .addtag{ |
| | | |
| | | } |
| | | } |
| | | } |