个人明细

pages/person-detail/child/ship-select.vue

+
+
+<template>
+    <div class="select-box sex-box">
+        <div class="mark" @click="chooseShip({type: -1})"></div>
+        <div class="select-con t-center">
+            <div class="s-tit">与患者关系</div>
+			
+            <div class="s-val" :class="curShip === item.id ? 'curSex': '' " v-for="(item,index) in defaShip" :key="index" @click="chooseShip({type:item.id,name:item.name})">{{item.name}}</div>
+            <!-- <div class="s-val" :class="curSex === 2 ? 'curSex': '' " @click="chooseSex('sex', {type: 2})">女</div> -->
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+	data() {
+	  return {
+	    defaShip:[
+			{
+				name:'医生与患者',
+				id:1
+			},
+			{
+				name:'直系亲属',
+				id:2
+			},
+			{
+				name:'朋友',
+				id:3
+			},
+			{
+				name:'其他',
+				id:4
+			}
+		]
+	  };
+	},
+  props: {
+    chooseShip: {
+      type: Function,
+      default: () => {},
+    },
+    curShip: {
+      type: Number,
+      default: 3,
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+   // @import '@/static/css/common.scss';
+     .sex-box {
+        .select-con {
+            position: fixed;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            z-index: 100;
+            font-size: 30px;
+            background: #fff;
+                color: rgba(51, 51, 51, 1);
+            .s-tit {
+                color: rgba(148, 151, 153, 1);
+                height: 100px;
+                line-height: 100px;
+            }
+            .s-val {
+                height: 90px;
+                line-height: 90px;
+                border-bottom: 1px solid rgba(240, 240, 240, 1);
+            }
+             .curSex{
+                color:rgba(65,183,167,1);
+            }
+            .s-val-cur {
+                color: rgba(65, 183, 167, 1);
+            }
+            .s-footer-box {
+                height: 87px;
+                line-height: 87px;
+                .s-left {
+                    color: rgba(153, 153, 153, 1);
+                }
+                .s-right {
+                    color: rgba(65, 183, 167, 1);
+                    border-left: 1px solid rgba(240, 240, 240, 1);
+                }
+            }
+
+        }
+    }
+</style>

pages/person-detail/index.scss

+.person-detail-wrap{
+    .person-detail{
+        position:relative;
+        z-index:18;
+        .bg{
+            background:url(../../assets/img/person-detail/detail-top-bg.png) no-repeat;
+            background-size: 100% 100%;
+            width: 100%;
+            height:130px;
+            position: absolute;
+            z-index: 19;
+        }
+        .person-info{
+            position:relative;
+            padding:20px 15px;
+            z-index: 20;
+            display: flex;
+            align-items: center;
+            color:#fff;
+            font-size:14px;
+            span.orge{
+                color:#FFDD58
+            }
+            .header-pic{
+                width: 50px;
+                height: 50px;
+                border-radius: 50px;
+                margin-right: 11px;
+            }
+        }
+    }
+}
\ No newline at end of file

pages/person-detail/index.vue

+<template>
+    <div class="person-detail-wrap">
+        <div class="person-detail">
+            <div class="bg"></div>
+            <div class="person-info">
+                
+                <img class="header-pic" src="https://pics2.baidu.com/feed/b3fb43166d224f4acd2725cb12a05e579922d10d.jpeg?token=1fefde88eededad95a771a0daa49c7ea&s=F63015C74A323A900A8D193803008010"/>
+                <div>
+                    累计排名 <span class="orge">123</span>  |  累计勤奋分 <span class="orge">123</span>
+                </div>
+            </div>
+            <div class="detail-list">
+                <div class="list-item">
+                    
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Vue from 'vue';
+import { mapState } from 'vuex';
+import { Toast, List ,Popup} from 'vant';
+// import Dialog from '@/components/dialog';
+// import Ajax from '@/assets/commons/tools/ajax';
+// import BottomPop from '@/components/bottom-pop.vue';
+// import ShipSelect from './child/ship-select';
+// 
+// Vue.use(List).use(Popup);
+
+export default {
+    head() {
+        return {
+            title: '添加居民',
+        };
+    },
+    data() {
+        return {
+         
+            showPop:false
+        };
+    },
+    computed: {
+        // ...mapState({
+        //   list: state => state.smsInviteResident.chooseSmsResident,
+        //   doctorId: state => state.logins.doctorId,
+        //   projectId: state => state.logins.projectId,
+        //     sAuthentication:state => state.logins.isAuthentication,
+        // }),
+    },
+    components: {
+    
+    },
+    mounted() {
+   
+    },
+    methods: {
+		
+    
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+  @import './index.scss';
+</style>