shouye

src/components/News.vue

@@ -2,9 +2,19 @@
   <div class="news_container">
     <HeadLine title="新闻/NEWS" line1="获取行业最新咨询" />
     <div class="card_wrap">
-      <div class="card"></div>
-      <div class="card"></div>
-      <div class="card"></div>
+      <div class="card">
+        <div class="header">
+          <div class="wrap">
+            <div class="icon"></div>
+            <p class="font">公司动态</p>
+          </div>
+        </div>
+        <div class="img"></div>
+        <div class="bottom">
+          <p class="title">智能多通道水下图像检测系统</p>
+          <p class="desc">图像识别是人工智能的一个重......</p>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -15,6 +25,7 @@ import HeadLine from 'cpns/HeadLine'
 
 <style lang="scss" scoped>
 .news_container {
+  background: #fff;
   .card_wrap {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
@@ -22,8 +33,61 @@ import HeadLine from 'cpns/HeadLine'
     box-sizing: border-box;
     .card {
       flex: 1;
-      background: #000;
-      height: 160px;
+      background: #ededed;
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .wrap {
+          display: flex;
+          align-items: center;
+          padding: 7px 0;
+          box-sizing: border-box;
+          .icon {
+            min-width: 13px;
+            min-height: 13px;
+            background: #000;
+          }
+          .font {
+            font-size: 16px;
+            transform: scale(0.5);
+            font-family: Alibaba PuHuiTi;
+            font-weight: 400;
+            white-space: nowrap;
+            color: #000;
+            width: 200%;
+          }
+        }
+      }
+      .img {
+        width: 100%;
+        height: 101px;
+        background: #000;
+      }
+      .bottom {
+        padding: 8px;
+        box-sizing: border-box;
+        .title {
+          font-size: 14px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #262626;
+          transform: scale(0.5);
+          transform-origin: 0 center;
+          max-width: 100px;
+          white-space: nowrap;
+        }
+        .desc {
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 300;
+          color: #afafaf;
+          transform: scale(0.5);
+          transform-origin: 0 center;
+          white-space: nowrap;
+          max-width: 100px;
+        }
+      }
     }
   }
 }