黑马

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 class="separator"></span></p>
           <span>高效提升</span>
         </div>
         <div class="btn">
@@ -29,18 +29,18 @@ const handleDetail = () => {
         </div>
       </div>
       <div class="card_list">
-        <div class="card_item bg">
+        <div class="card_item bg w">
           <p>1.定制专属训练场景</p>
           <img src="../assets/dingzhi.png" alt="">
         </div>
-        <div class="card_item tg">
+        <div class="card_item tg w1">
           <p>2.自由设定客户角色</p>
           <div class="scence"></div>
         </div>
-        <div class="card_item voice">
+        <div class="card_item voice w">
           <p>3.拟真语音深度对话</p>
         </div>
-        <div class="card_item advice bg">
+        <div class="card_item  bg w1">
           <HeimaPage></HeimaPage>
         </div>
       </div>
@@ -79,7 +79,7 @@ html {
 }
 
 .logo {
-  padding: 1.3rem;
+  padding: 1.5rem 1.3rem;
   display: flex;
   align-items: center;
 
@@ -107,6 +107,8 @@ html {
 
 .main {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .banner {
@@ -118,7 +120,8 @@ html {
     color: #fff;
     font-size: 2.5rem;
 
-    .separator {
+    .separator::before {
+      content: "▪";
       color: #fff;
     }
   }
@@ -127,7 +130,7 @@ html {
     display: flex;
     color: rgba(255, 255, 255, 0.7);
     box-sizing: border-box;
-    margin-top: 1rem;
+    margin-top: 1.2rem;
 
     div {
       border: 1px solid rgba(255, 255, 255, 0.7);
@@ -152,8 +155,6 @@ html {
 
   .card_item {
     width: 48%;
-    // flex: 1 1 calc(50% - 2vw);
-    /* 始终两列 */
     box-sizing: border-box;
     padding: 0.5rem 0 0;
     display: flex;
@@ -168,7 +169,7 @@ html {
 
     img {
       // width: 100%;
-      height: 9.5rem;
+      height: 10.5rem;
       object-fit: cover;
       max-height: auto;
       max-width: 100%;
@@ -199,7 +200,7 @@ html {
   }
 
   .voice {
-    height: 11rem;
+    height: 9.5rem;
     background-image: url(../assets/sence.png);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     background-repeat: no-repeat;
@@ -214,10 +215,18 @@ html {
       color: #fff;
     }
   }
+
+  .w {
+    width: 45%;
+  }
+
+  .w1 {
+    width: 52%
+  }
 }
 
 .bottom {
-  flex: 0 0 auto;
+  // flex: 0 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;