<template> <div class="content"> <div class="header"> <div class="tip"></div> <div class="title">联系信息</div> </div> <div class="box"> <div class="item"> <span>手机号码</span> <label></label> </div> <div class="item"> <span>固定电话</span> <label></label> </div> <div class="item"> <span>紧急联系电话</span> <label>福国际大厦A座88层市场推广专员2019-11-22</label> </div> <div class="item"> <span>邮政编码</span> <label></label> </div> <div class="item"> <span>婚姻状况</span> <label></label> </div> <div class="item"> <span>户口所在地</span> <label></label> </div> <div class="item"> <span>现居住地</span> <label></label> </div> </div> </div> </template> <script lang="ts"> import Vue from "vue"; // import { Button } from 'vant'; import { Component } from "vue-property-decorator"; @Component({ // components:{ // // [Cell.name]: Cell, // [Button.name]:Button // } }) export default class workInfo extends Vue {} </script> <style lang="less" scoped> .content { margin-top: 10px; .header { height: 50px; display: flex; align-items: center; .tip { width: 3px; height: 16px; background: rgba(34, 189, 122, 1); } .title { margin-left: 17px; font-size: 16px; font-weight: 500; color: rgba(61, 64, 71, 1); } } .box { margin: 0 20px; padding: 12px 0; border-top: 1px solid #eaeef5; .item { display: flex; align-items: center; span { min-width: 98px; display: block; font-size: 14px; color: rgba(149, 152, 158, 1); line-height: 30px; text-align: right; margin-bottom: auto; } label { font-size: 14px; color: rgba(61, 64, 71, 1); line-height: 30px; margin-left: 20px; } } } } </style>