专家库修改

src/views/disasterRiskMonitor/expertDatabase.vue

@@ -140,6 +140,7 @@ const personInform = item => {
 
 <style scoped lang="scss">
 .container {
+  height: calc(100vh - 55px);
   .van-dropdown-menu {
     :deep(.van-dropdown-menu__bar) {
       background: transparent;

src/views/disasterRiskMonitor/expertinformation.vue

@@ -2,7 +2,7 @@
   <div class="all">
     <div>
       <div v-for="item in inform">
-        <div class="card" style="height: 210px; margin-top: 10px">
+        <div class="card" style="margin-top: 10px">
           <div style="padding-top: 1px">
             <div class="circle2">
               <img :src="onlineUser" />
@@ -18,7 +18,12 @@
           >
             {{ item.name }}
           </div>
-          <div style="width: 300px; margin-left: 30px; margin-top: 5px; text-align: center;">
+          <div style="
+              display: flex;
+              justify-content: center;
+              text-align: center;
+              padding: 0 20px 0;
+            ">
             {{ item.unit }}
           </div>
         </div>
@@ -28,31 +33,31 @@
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">行政区域</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.administrativeArea }}</div>
+            <div class="card-two">{{ item.administrativeArea }}</div>
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">荣誉称号</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.honoraryTitle }}</div>
+            <div class="card-two">{{ item.honoraryTitle }}</div>
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">职务</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.position }}</div>
+            <div class="card-two">{{ item.position }}</div>
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">职称</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.title }}</div>
+            <div class="card-two">{{ item.title }}</div>
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">发证日期</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.dateOfIssue }}</div>
+            <div class="card-two">{{ item.dateOfIssue }}</div>
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">专家类型</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.expertType }}</div>
+            <div class="card-two">{{ item.expertType }}</div>
           </div>
           <div class="card-one">
             <div style="margin-left: 15px; padding-top: 10px">专业领域</div>
-            <div style="padding-top: 10px; margin-right: 15px">{{ item.professionalField }}</div>
+            <div class="card-two">{{ item.professionalField }}</div>
           </div>
         </div>
       </div>
@@ -115,12 +120,19 @@ const inform = ref([
   background-color: #ffffff;
 }
 .card-one {
+  display: flex;
+  justify-content: space-between;
   width: 355px;
   background-color: #ffffff;
-  height: 45px;
   margin-top: 2px;
+}
+.card-two {
+  padding-top: 10px;
+  margin-right: 15px;
+  width: 200px;
+  padding-bottom: 10px;
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
 }
 .all {
   width: 100%;
@@ -157,4 +169,11 @@ const inform = ref([
   margin-left: 5px;
   border-radius: 5px;
 }
+.unit {
+  width: 300px;
+  margin-top: 5px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+}
 </style>