暂存

src/HManagement/serviceDataScreen/components/borderTemplate.vue

@@ -1,23 +1,47 @@
 <template>
-  <div class="border-box-style">
-
+  <div class="border-box-style box-content-style" :style="borderBox">
+    <div class="justify-style">
+      <div class="justify-style">
+        <div class="icon"></div>
+        <div class="title">业务员账户</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "borderTemplate"
+  name: "borderTemplate",
+  props:["borderBox"]
 }
 </script>
 
 <style scoped>
   .border-box-style{
-    width: 290px;
-    height: 240px;
     background: linear-gradient( 180deg, #00244D 0%, #001E41 100%);
-    box-shadow: 0px 2px 4px 1px rgba(0,0,0,0.15);
-    border-radius: 4px 4px 4px 4px;
-    border: 2px solid #3D73BA;
+    box-shadow: 0.000vw 0.104vw 0.208vw 0.052vw rgba(0,0,0,0.15);
+    border-radius: 0.208vw 0.208vw 0.208vw 0.208vw;
+    border: 0.104vw solid #3D73BA;
     opacity: 0.8;
   }
+  .justify-style{
+    display: flex;
+    justify-content: left;
+  }
+  .box-content-style{
+    padding: 1.042vw;
+  }
+  .box-content-style .icon {
+    width: 0.313vw;
+    height: 0.938vw;
+    background: #E6F4FF;
+    border-radius: 0.104vw 0.104vw 0.104vw 0.104vw;
+  }
+  .box-content-style .title{
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: bold;
+    font-size: 1.250vw;
+    color: #E6F4FF;
+    text-align: left;
+  }
 </style>

src/HManagement/serviceDataScreen/index.vue

@@ -33,7 +33,7 @@
     </div>
     <div class="content-style justify-style">
       <div>
-        <borderTemplate></borderTemplate>
+        <borderTemplate borderBox="width: 15.104vw;height: 12.500vw;"></borderTemplate>
       </div>
     </div>
     <fullScreen ref="fullRef" class="inline-16" domId="fullScreen" style="visibility: hidden" @backFull="backFull"></fullScreen>
@@ -256,29 +256,27 @@ export default {
   padding: 0;
 }
 .select-style{
-  width: 30vw;
+  width: 30%;
   padding-top: 0.625vw;
 }
 .title-style {
-  width: 30vw;
+  width: 30%;
   font-family: Microsoft YaHei, Microsoft YaHei;
   font-weight: bold;
   font-size: 2.292vw;
   color: #E6F4FF;
-  line-height: 0.000vw;
   text-shadow: 0.000vw 0.104vw 0.208vw #A9D7F9;
-  text-align: left;
+  margin: auto;
   font-style: normal;
   text-transform: none;
-  padding-top: 1.042vw;
+  padding-top: 1.042vh
 }
 .time-style{
   font-family: Microsoft YaHei, Microsoft YaHei;
   font-weight: 400;
   font-size: 0.938vw;
   color: #E6F4FF;
-  line-height: 0.000vw;
-  text-align: left;
+  text-align: right;
   font-style: normal;
   text-transform: none;
   padding-top: 0.938vw;
@@ -294,7 +292,7 @@ export default {
   text-align: left;
   font-style: normal;
   text-transform: none;
-  margin-top: 1.042vw;
+  margin-top: 0.538vw;
   border-radius: 0.313vw 0.313vw 0.313vw 0.313vw;
   border: none;
 }
@@ -303,9 +301,9 @@ export default {
   justify-content: space-between
 }
 .content-style{
-  margin: 2.604vw 1.042vw 1.042vw 1.042vw;
+  margin: 1.804vw 1.042vw 1.042vw 1.042vw;
   border: 0.052vw solid #5daf34;
-  height: calc(100vh - 11.458vw);
+  height: calc(100vh - 7.458vw);
 }
 /deep/ .el-input {
   position: relative;