黑色块背景就位

src/components/ServiceProcess.vue

@@ -36,7 +36,7 @@ const { breakpoint } = useBootstrapBreakpoint();
            style="margin-left: 100px;
                   margin-right: 100px;
                   margin-top: 79px;
-                  margin-bottom: 191px;
+                  margin-bottom: 95px;
                   max-width:100%;height:auto;">
         <img src="/ServiceProcessRes/designopinion.png"
              width="100%" height="100%"/>
@@ -46,11 +46,21 @@ const { breakpoint } = useBootstrapBreakpoint();
            style="margin-left: 295px;
                   margin-right: 295px;
                   margin-top: 79px;
-                  margin-bottom: 191px;
+                  margin-bottom: 95px;
                   max-width:100%;height:auto;">
         <img src="/ServiceProcessRes/designopinion.png"
              width="100%" height="100%"/>
       </div>
+      <!-- 你说咋写就咋写，要是你跟我说这不协调，我就把设计图亮出来说你就是这么设计的。要改你自己改。亏你想得出来，桌面用黑字写外边，移动用白字写里边。为了显示这个我可是脑洞大开想出来个办法。 -->
+      <div v-if="breakpoint==='md'||breakpoint==='lg'
+                ||breakpoint==='xl'||breakpoint==='xxl'"
+          class="normalcontentdiv"
+          style="margin-bottom: 48px;color: black;">
+        <div class="normalcontenttitle">设计流程</div>
+      </div>
+    </div>
+    <div id="blackchart">
+
     </div>
   </div>
 </template>
@@ -74,4 +84,15 @@ export default {
   }
 }
 
+#blackchart{
+  width:100%;
+  @include media-breakpoint-between(xs, md) {
+    background-image: url('/ServiceProcessRes/blackbgwep.png');
+  }
+
+  @include media-breakpoint-up(md) {
+    background-image: url('/ServiceProcessRes/blackbgpc.png');
+  }
+}
+
 </style>

src/publicstyle.scss

@@ -139,7 +139,7 @@
     margin-top: 96px;
   }
 }
-
+//这是span！
 .normalcontenttitle{
   margin-left: 0px;
   margin-right: 0px;