.

src/views/ConnectView.vue

@@ -1,12 +1,17 @@
 <template>
     <div class="page">
         <div class="contet">
-            <div class="text1">
-                商务合作专用邮箱:13267002685@qq.com
-                <span>(本邮箱仅处理商务合作，其他情况均不回复。)</span>
+            <div class="content-left">
+                <div class="menu">商户合作</div>
             </div>
+            <div class="content-right">
+                <div class="text1">
+                    商务合作专用邮箱:13267002685@qq.com
+                    <span>(本邮箱仅处理商务合作，其他情况均不回复。)</span>
+                </div>
 
-            <div class="text2">如您有合作需求，您可以反馈至本邮箱，工作人员会在收到您的申请后提交给负责人。</div>
+                <div class="text2">如您有合作需求，您可以反馈至本邮箱，工作人员会在收到您的申请后提交给负责人。</div>
+            </div>
         </div>
     </div>
 </template>
@@ -20,20 +25,27 @@
 
 .contet {
     background-color: #fff;
-    padding: 157px 169px 85px;
     min-height: calc(100vh - 334px - 90px);
     box-sizing: border-box;
+    .f();
+    align-items: stretch;
+    .content-right {
+        padding: 157px 100px 150px;
+        flex-grow: 1;
+    }
 }
 
 .text1 {
     font-size: 30px;
     color: #0c151b;
     line-height: 29px;
+    .f-col();
 
     span {
         font-size: 24px;
         color: #0ecb00;
         line-height: 29px;
+        margin-top: 32px;
     }
 }
 
@@ -43,14 +55,28 @@
     line-height: 25px;
     margin-top: 100px;
 }
-
+.content-left {
+    width: 199px;
+    background-color: #0c151b;
+    flex-shrink: 0;
+    padding: 35px 0;
+    .menu {
+        height: 76px;
+        background: #00dd0b;
+        font-size: 30px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 76px;
+        text-align: center;
+    }
+}
 @media screen and(max-width:1600px) {
     .page {
         padding: 0 60px;
     }
 
-    .contet {
-        padding: 0 50px 50px;
+    .contet-right {
+        padding: 150px 50px 150px;
     }
 }
 </style>