首页切图60%

src/App.vue

 <template>
-    <div id="app" class="container-fluid">
+    <div id="app">
         <router-view></router-view>
     </div>
 </template>

src/assets/css/main.scss

@@ -3,7 +3,4 @@
 @import "./_icon.scss";
 @import "./_mixin.scss";
 @import "./_base.scss";
-@import "../../../node_modules/bootstrap/scss/bootstrap";
-// @import "../../../node_modules/bootstrap/scss/functions";
+@import "../../../node_modules/bootstrap/scss/bootstrap";
\ No newline at end of file
-// @import "../../../node_modules/bootstrap/scss/variables";
-// @import "../../../node_modules/bootstrap/scss/mixins";

src/components/main.vue

@@ -29,8 +29,3 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.router-view{
-  padding: 20px 0;
-}
-</style>

src/views/Home/comps/list.vue

+<template>
+  <div class="list">
+    <div v-for="(tmp, i) in 10" :key="i" class="row">
+      <div class="col-lg-8 list-left">
+        <span></span>
+        <span>墨玉树上老菌菌业有限公司墨玉树上老菌菌业有限公司</span>
+      </div>
+      <div class="col-lg-4 list-right">2020-10-20</div>
+    </div>
+    <div class="row">
+      <div class="col more"><span>更多></span></div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.list {
+  margin: 0;
+  padding: 0;
+  .row {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    margin: 0;
+    .list-left {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      @include ellipsis;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 4px;
+          height: 4px;
+          background: #f26335;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+        &:nth-child(2) {
+          flex: 1;
+          @include ellipsis;
+        }
+      }
+    }
+    .list-right{
+      text-align: right;
+    }
+  }
+  .more{
+    text-align: right;
+    span{
+      color: #F26335;
+      font-size: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file