黑马

src/views/HeimaView.vue

@@ -20,7 +20,7 @@ const handleDetail = () => {
     <div class="main">
       <div class="banner">
         <div class="product">
-          <p>智能陪练 <span class="separator"></span></p>
+          <p><span>智能陪练</span> <span class="separator"></span></p>
           <span>高效提升</span>
         </div>
         <div class="btn">
@@ -40,7 +40,7 @@ const handleDetail = () => {
         <div class="card_item voice w">
           <p>3.拟真语音深度对话</p>
         </div>
-        <div class="card_item  bg w1">
+        <div class="card_item bg w1 h">
           <HeimaPage></HeimaPage>
         </div>
       </div>
@@ -53,10 +53,6 @@ const handleDetail = () => {
 </template>
 
 <style scoped lang="less">
-p {
-  margin: 0;
-  padding: 0;
-}
 
 html {
   touch-action: manipulation;
@@ -119,10 +115,17 @@ html {
     font-weight: 700;
     color: #fff;
     font-size: 2.5rem;
+    p{
+      display: flex;
+      align-items: center;
+    }
 
-    .separator::before {
-      content: "▪";
-      color: #fff;
+    .separator{
+      margin-left: 3vw;
+      display: inline-block;
+      width: 0.8rem;
+      height: 0.8rem;
+      background: #fff;
     }
   }
 
@@ -200,7 +203,8 @@ html {
   }
 
   .voice {
-    height: 9.5rem;
+    min-height: 8rem;
+    // height: 9.5rem;
     background-image: url(../assets/sence.png);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     background-repeat: no-repeat;
@@ -223,6 +227,9 @@ html {
   .w1 {
     width: 52%
   }
+  .h{
+    min-height: 8rem;
+  }
 }
 
 .bottom {
@@ -230,7 +237,7 @@ html {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 3vw;
+  padding: 0 3vw 3vw 3vw;
 
   .w {
     width: 30vw;