修改样式

src/css/global.scss

@@ -1,8 +0,0 @@
-.el-input__inner{
-  border:none;
-  border-bottom:1px solid #ccc;
-  border-radius: 0px;
-}
-.el-form-item__label{
-  color:#A1A6AC;
-}

src/views/contractPlacing/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="container" style="margin-bottom: 100px;display: flex;justify-content: center;">
     <div style="width:80%;">
-<!--      基本资料-->
+      <!--      基本资料-->
       <div class="moduleStyle">
         <div class="titleBox">
           <span class="redBlock">&nbsp;</span>
@@ -10,53 +10,54 @@
         <div class="basicData">
           <div class="mainModules">
             <span>起运港口</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px"/>
+            <el-input style="width:80%;margin-left:20px;top: 4px;"/>
           </div>
           <div class="mainModules">
             <span>目的港口</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
-            <span >预计装货时间</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <span>预计装货时间</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
             <span>运输条款</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
             <span>付款方式</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
             <span>受票方</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
             <span>箱内签收单</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
             <span>订舱人扣货</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="remarkBox">
             <span>备注</span>
             <div style="margin-left:20px;padding-top: 4px;">
               <el-input style="width:80%;" v-model="form.port" placeholder="如有特殊需求，请再此说明"/>
-              <el-button type="text" style="display: inline; color: red">附件上传<i class="el-icon-upload el-icon--right"></i></el-button>
+              <el-button type="text" style="display: inline; color: red">附件上传<i
+                class="el-icon-upload el-icon--right"></i></el-button>
             </div>
           </div>
           <div class="mainModules"></div>
         </div>
       </div>
-<!--      预计时间-->
+      <!--      预计时间-->
       <div class="moduleStyle">
         <div class="titleBox">
           <span class="redBlock">&nbsp;</span>
           <span>预计时间</span>
         </div>
-<!--        步骤条-->
+        <!--        步骤条-->
         <div class="stepBarIcon">
           <div class="iconShip">
             <img src="@/assets/ship.png" alt="">
@@ -65,7 +66,7 @@
           <div class="stepBarLine">
             <div v-for="item in 5"></div>
           </div>
-<!--          文本地点-->
+          <!--          文本地点-->
           <div class="stepBarText">
             <div>
               <p>天津</p>
@@ -93,14 +94,14 @@
           </div>
         </div>
       </div>
-<!--      收发货人信息-->
+      <!--      收发货人信息-->
       <div class="feeBox" style="">
         <!--      发货信息-->
         <div class="titleBox_receive" style="margin-right: 4px;">
           <div>
             <span class="redBlock">&nbsp;</span>
             <span>发货信息</span>
-        </div>
+          </div>
           <div class="receiveInfo">
             <div class="infoBox">
               <span>发货人全称</span>
@@ -120,70 +121,71 @@
         <!--      收货信息-->
         <div class="titleBox_receive" style="padding-right: 10px">
           <div>
-          <span class="redBlock">&nbsp;</span>
-          <span>收货信息</span>
+            <span class="redBlock">&nbsp;</span>
+            <span>收货信息</span>
           </div>
           <div class="receiveInfo">
-            <div class="infoBox" >
+            <div class="infoBox">
               <span>收货人全称</span>
               <el-input/>
             </div>
-            <div class="infoBox" >
+            <div class="infoBox">
               <span>收货人联系人</span>
               <el-input/>
             </div>
-            <div class="infoBox" >
+            <div class="infoBox">
               <span>收货人电话</span>
               <el-input/>
             </div>
 
           </div>
         </div>
-        </div>
-<!--      货物信息-->
+      </div>
+      <!--      货物信息-->
       <!--      基本资料-->
-      <div class="moduleStyle" >
+      <div class="moduleStyle">
         <div class="titleBox">
           <span class="redBlock">&nbsp;</span>
           <span>货物信息</span>
         </div>
         <div style="display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px">
-          <div class="mainModules" >
-            <span >货物名称</span>
+          <div class="mainModules">
+            <span>货物名称</span>
             <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
-            <span >货类</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          <div class="mainModules">
+            <span>货类</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
-            <span >包装类型</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          <div class="mainModules">
+            <span>包装类型</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
-            <span >箱型</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          <div class="mainModules">
+            <span>箱型</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
-            <span >箱量</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          <div class="mainModules">
+            <span>箱量</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
-            <span >单箱重量（吨）</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+          <div class="mainModules">
+            <span>单箱重量（吨）</span>
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
+          <div class="mainModules">
             <span>箱态</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
+          <div class="mainModules">
             <span>自备货柜</span>
-            <el-input style="width:80%;margin-left:20px;top: 4px" />
+            <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
-          <div class="mainModules" >
+          <div class="mainModules">
             <span>危险化学品</span>
-            <el-input style="width:70%;margin-left:20px;top: 4px" />
-            <el-button type="text" style="display: inline; color: red"><i class="el-icon-upload el-icon--right"></i></el-button>
+            <el-input style="width:70%;margin-left:20px;top: 4px"/>
+            <el-button type="text" style="display: inline; color: red"><i class="el-icon-upload el-icon--right"></i>
+            </el-button>
           </div>
           <div style="width: 72%;height: 100px;text-align: left;">
             <span style="margin-left:20px;color:#A3A7AD"></span>
@@ -194,26 +196,26 @@
 
         </div>
       </div>
-<!--      费用信息-->
+      <!--      费用信息-->
       <div class="moduleStyle">
         <div class="titleBox">
           <span class="redBlock">&nbsp;</span>
           <span>费用信息</span>
         </div>
-        <div class="basicData"  style="display:flex;justify-content: flex-start">
+        <div class="basicData" style="display:flex;justify-content: flex-start">
           <div class="mainModules">
             <span style="">是否办理保险</span>
             <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
           <div class="mainModules">
-            <span >保险货值（万元）</span>
+            <span>保险货值（万元）</span>
             <el-input style="width:80%;margin-left:20px;top: 4px"/>
           </div>
         </div>
       </div>
-      </div>
+    </div>
 
-<!--    右基本资料-->
+    <!--    右基本资料-->
     <div class="costCalculation">
       <div class="costModuleStyle" style="">
         <div class="titleBox">
@@ -223,7 +225,7 @@
         <div class="mainBox">
           <p>
             <span>箱型</span>
-            <span >1111</span>
+            <span>1111</span>
           </p>
           <p>
             <span>箱量</span>
@@ -262,14 +264,12 @@
       <div class="confirmOrder" style="">
         确认下单
       </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
-import "@/css/global.scss"
+
 export default {
   name: 'contractPlacing',
   data() {
@@ -282,148 +282,219 @@ export default {
   created() {
 
   },
-  methods: {
-
-  }
+  methods: {}
 };
+
 </script>
 
 <style scoped lang="scss">
-.moduleStyle{
+.el-input {
+  /deep/ .el-input__inner {
+    border: none;
+    border-bottom: 1px solid #ccc;
+    border-radius: 0;
+  }
+}
+.moduleStyle {
   background: #FFFFFF;
   box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.33);
-  width:75%;
+  width: 75%;
   margin-bottom: 10px;
 }
-.titleBox{
-  padding-left:30px;
-  width:100%;
-  text-align:left;
-  padding:10px;
+
+.titleBox {
+  padding-left: 30px;
+  width: 100%;
+  text-align: left;
+  padding: 10px;
   font-size: 20px
 }
-.feeBox{
+
+.feeBox {
   display: flex;
   justify-content: space-between;
-  width:75%;
+  width: 75%;
   margin-bottom: 10px;
 }
-.titleBox_receive{
-  padding-left:30px;
-  width:50%;
-  text-align:left;
-  padding:12px;
+
+.titleBox_receive {
+  padding-left: 30px;
+  width: 50%;
+  text-align: left;
+  padding: 12px;
   font-size: 20px;
   background: #FFFFFF;
   box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
 }
-.redBlock{
+
+.redBlock {
   display: inline-block;
   background-color: red;
-  width:5px;
+  width: 5px;
   margin-right: 10px
 }
-.basicData{
-  display:flex;justify-content:space-around;flex-wrap: wrap;margin: 10px 20px
+
+.basicData {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin: 10px 20px
 }
-.mainModules{
+
+.mainModules {
   width: 24%;
   height: 100px;
   text-align: left;
 }
-.remarkBox{
-  width: 72%;height: 100px;text-align: left;
-  span{
-    margin-left:20px;color:#A3A7AD;
+
+.remarkBox {
+  width: 72%;
+  height: 100px;
+  text-align: left;
+
+  span {
+    margin-left: 20px;
+    color: #A3A7AD;
   }
 }
-.mainModules > span{
-  margin-left:20px;
-  color:#A3A7AD;
+
+.mainModules > span {
+  margin-left: 20px;
+  color: #A3A7AD;
 }
-.stepBarIcon{
-  margin:10px;
-  padding:20px 0 40px 0;
+
+.stepBarIcon {
+  margin: 10px;
+  padding: 20px 0 40px 0;
   display: flex;
   flex-direction: column;
   align-items: center
 }
-.iconShip{
+
+.iconShip {
   width: 35%;
   display: flex;
   justify-content: space-between
 }
-.iconShip{
-  img{
-    width:20px
+
+.iconShip {
+  img {
+    width: 20px
   }
 }
-.stepBarLine{
+
+.stepBarLine {
   width: 80%;
   display: flex;
   align-items: center;
 }
-.stepBarLine{
-  div:nth-child(odd){
-    background-color: red;width: 8px;height: 8px;border-radius: 50%;display: inline-block
+
+.stepBarLine {
+  div:nth-child(odd) {
+    background-color: red;
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    display: inline-block
   }
-  div:nth-child(even){
-    width: 50%;height: 2px;background-color: red;display: inline-block;
+
+  div:nth-child(even) {
+    width: 50%;
+    height: 2px;
+    background-color: red;
+    display: inline-block;
   }
 }
-.stepBarText{
-  display: flex;justify-content: space-between;width:90%;
-  div{
-    div{
-      color:#848484;display: flex;flex-direction: column;align-items: center;
-      p:nth-child(odd){
-        width:70px;margin: 0
+
+.stepBarText {
+  display: flex;
+  justify-content: space-between;
+  width: 90%;
+
+  div {
+    div {
+      color: #848484;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      p:nth-child(odd) {
+        width: 70px;
+        margin: 0
       }
-      p:nth-child(even){
+
+      p:nth-child(even) {
         margin: 0
       }
     }
   }
 }
-.receiveInfo{
+
+.receiveInfo {
   margin: 30px 0 0 10px;
-  .infoBox{
-    width: 100%;height: 100px;text-align: left;
-    span{
-      margin-left:20px;color:#A3A7AD;font-size:16px
+
+  .infoBox {
+    width: 100%;
+    height: 100px;
+    text-align: left;
+
+    span {
+      margin-left: 20px;
+      color: #A3A7AD;
+      font-size: 16px
     }
-    .el-input{
-      width:90%;margin-left:20px;top: 4px
+
+    .el-input {
+      width: 90%;
+      margin-left: 20px;
+      top: 4px
     }
   }
 }
 
-.costCalculation{
-  width:25%;position: fixed;right:4%;
-  .costModuleStyle{
-    background: #FFFFFF;box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
+.costCalculation {
+  width: 25%;
+  position: fixed;
+  right: 4%;
+
+  .costModuleStyle {
+    background: #FFFFFF;
+    box-shadow: 0px 4px 13px 0px rgba(200, 200, 200, 0.44);
   }
-  .titleBox{
-    .redBlock{
-      display: inline-block;background-color: red;width:5px;margin-right: 10px
+
+  .titleBox {
+    .redBlock {
+      display: inline-block;
+      background-color: red;
+      width: 5px;
+      margin-right: 10px
     }
   }
-  .mainBox{
-    padding:10px;margin: 0 20px 0 20px;border-bottom:1px dashed #E8E8E8;color: #71757A;
-    p{
-      display: flex;justify-content: space-between;
-      span:nth-child(even){
+
+  .mainBox {
+    padding: 10px;
+    margin: 0 20px 0 20px;
+    border-bottom: 1px dashed #E8E8E8;
+    color: #71757A;
+
+    p {
+      display: flex;
+      justify-content: space-between;
+
+      span:nth-child(even) {
         color: #000;
       }
     }
   }
 }
-.confirmOrder{
+
+.confirmOrder {
   background: red;
-  height: 70px;margin-top: 20px;
+  height: 70px;
+  margin-top: 20px;
   text-align: center;
   line-height: 60px;
-  color:white;
+  color: white;
   font-size: 20px;
 }
 </style>