美化按钮

src/views/bigScreen/home/index.vue

@@ -48,15 +48,15 @@
       </div>
     </el-dialog>
     <div class="operate-box">
-      <el-button type="primary" @click="changeScene('ocean')">
+      <div @click="changeScene('ocean')">
         海洋
-      </el-button>
-      <el-button type="primary" @click="changeScene('grass')">
+      </div>
+      <div @click="changeScene('grass')">
         草地
-      </el-button>
-      <el-button type="primary" @click="changeScene('desert')">
+      </div>
+      <div @click="changeScene('desert')">
         沙漠
-      </el-button>
+      </div>
     </div>
 
   </div>
@@ -710,14 +710,30 @@ export default {
 
   width: 100px;
   height: 300px;
-  background-color: #000;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  .el-button {
-    display: block;
+  >div {
+    width: 100%;
+    height: 30px;
+    background-color: antiquewhite;
+    border-radius: 10px;
+    margin-bottom: 10px;
+    cursor: pointer;
+    text-align: center;
+    line-height: 30px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #000;
+    background-color: #0979ca;
+    border: 1px solid #0979ca;
+
+    &:hover {
+      background-color: #00fb59;
+    }
+
   }
 }
 </style>