优化当简历详情中信息过长显示问题

src/page/resume/resumeDetail.vue

@@ -8,25 +8,38 @@
         <span style="margin-left:7px;font-size:16px;color:#0092FF" >基本信息</span>
         <span style="float:right;width:50px;height:24px;margin-right:5px"><Button type="primary" size='small' style="width:50px;height:24px" @click="downloadONE(detialID)" v-show="this.showBtn!=1">下载</Button></span>
       </p>
-      <div class="personalInformation-left">
-        <p style="margin-top:20px" @click="a">姓名：{{resume&&resume.ownerName}}</p>
-        <p>联系电话：{{resume&&resume.ownerMobile}}</p>
-        <p>电子邮箱：{{resume&&resume.email}}</p>
-        <p>所在地：{{resume&&resume.locationCity}}</p>
-        <p>求职状态：{{resume&&resume.statusMessage}}</p>
-        <p>期望行业：{{resume&&resume.industries}}</p>
-        <p>期望职位：{{resume&&resume.expectTitles}}</p>
-      </div>
-      <div class="personalInformation-right">
-        <p style="margin-top:20px">年龄：{{resume&&resume.ownerAge}}岁</p>
-        <p>职位：{{resume&&resume.ownerExpectTitles}}</p>
-        <p>学历：{{resume&&resume.ownerHighestDegree}}</p>
-        <p>经验：{{resume&&resume.workYearsOriginal}}年</p>
-        <p style="margin-top:30px">期望薪资：{{resume&&resume.expectSalary}}</p>
-        <p>期望地区：{{resume&&resume.city}}</p>
-      </div>
+       <div class="massageTitle">
+        <p>
+          <span class="bassMassage">姓名：{{resume&&resume.ownerName}}</span>
+          <span class="bassMassageRight">年龄：{{resume&&resume.ownerAge}}岁</span>
+        </p>
+        <p>
+          <span class="bassMassage">联系电话：{{resume&&resume.ownerMobile}}</span>
+          <span class="bassMassageRight">职位：{{resume&&resume.ownerExpectTitles}}</span>
+        </p>
+        <p>
+          <span class="bassMassage">电子邮箱：{{resume&&resume.email}}</span>
+          <span class="bassMassageRight">学历：{{resume&&resume.ownerHighestDegree}}</span>
+        </p>
+        <p>
+          <span class="bassMassage">所在地：{{resume&&resume.locationCity}}</span>
+          <span class="bassMassageRight">经验：{{resume&&resume.workYearsOriginal}}年</span>
+        </p>
+        <p>
+          <span class="bassMassage">求职状态：{{resume&&resume.statusMessage}}</span>
+          <span class="bassMassageRight"></span>
+        </p>
+        <p>
+          <span class="bassMassage">期望行业：{{resume&&resume.industries}}</span>
+          <span class="bassMassageRight">期望薪资：{{resume&&resume.expectSalary}}</span>
+        </p>
+        <p >
+          <span class="bassMassage">期望职位：{{resume&&resume.expectTitles}}</span>
+          <span class="bassMassageRight">期望地区：{{resume&&resume.city}}</span>
+        </p>
+       </div>
     </div>
-    <div class="workExperience" v-show="roList.length !==0 " style="margin-top:30px">
+    <div class="workExperience" v-show="roList.length !==0 ">
       <p class="detailTitel">
         <span>
           <img src="https://o7oe0d6qz.qnssl.com/image/icon_%E5%B7%A5%E4%BD%9C%E7%BB%8F%E5%8E%86_20_18px.png" style="height:16px;width:23px;vertical-align: middle;margin-top:-4px">
@@ -180,7 +193,28 @@ export default {
 }
 .personalInformation{
   width:860px;
-  height: 300px;
+  /* height: 600px; */
+  float: left;
+  /* border: 1px solid black */
+}
+.bassMassage{
+  display: inline-block;
+  width: 360px;
+  float: left;
+  margin-left:30px;
+  font-size: 14px;
+  margin-top:20px
+}
+.bassMassageRight{
+  display: inline-block;
+  width: 360px;
+  float: left;
+  font-size: 14px;
+  margin-top:20px;
+  margin-left:20px
+}
+.massageTitle{
+  /* height: 300px; */
   float: left;
 }
 .personalInformation-left{
@@ -204,7 +238,8 @@ export default {
 }
 .workExperience{
   width: 860px;
-   float: left;
+  float: left;
+  margin-top: 10px
 }
 .workExperience-detail{
   width: 860px;
@@ -292,13 +327,14 @@ export default {
   float: left;
   margin-top: 30px;
   line-height: 30px;
-  margin-bottom: 20px
+  margin-bottom: 40px
 }
 .detailTitel{
   width: 860px;
   height: 24px;
   float: left;
-  margin-top: 20px
+  margin-top: 20px;
+  /* border: 1px solid red */
 }
 </style>