按钮样式

src/App.vue

@@ -7,9 +7,9 @@
 -->
 <template>
   <a-config-provider :locale="zh_CN">
-    <div id="app">
+    <div class="d-flex flex-row flex-nowrap" id="app">
       <btn-con />
-      <router-view></router-view>
+      <router-view class="d-flex"></router-view>
     </div>
   </a-config-provider>
 </template>

src/components/BtnCom/BtnCon.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="btn-box">
-    <a-button @click="jump('/')">首页数据统计页面</a-button>
-    <a-button @click="jump('/Meeting')">会议纪要页面</a-button>
+  <div class="btn-box pa-3">
+    <div @click="jump('/')" class="btn">首页数据统计</div>
+    <div @click="jump('/Meeting')" class="btn">会议纪要</div>
   </div>
 </template>
 
@@ -25,8 +25,18 @@ export default {
 
 <style lang="stylus" scoped>
 .btn-box {
-  height: 100px;
-  width: 100%;
-  border: 2px solid #ccc;
+  width: 10%;
+  border-right: 1px solid #ccc;
+
+  .btn {
+    background: #13acc4;
+    border: 1px solid #04b6d2;
+    padding: 5px;
+    border-radius: 5px;
+    color: #fff;
+    cursor: pointer;
+    margin-bottom: 8px;
+    // width: fit-content;
+  }
 }
 </style>