pc端detail页按钮背景

src/pages/ruins-detail/index.vue

@@ -10,14 +10,14 @@
             {{ detail.content }}
           </div>
           <div class="btns">
-            <div class="btn" @click="handleClickEvent('travelAround', detail)">
+            <div class="btn left-btn" @click="handleClickEvent('travelAround', detail)">
               VR云游
             </div>
-            <div class="btn" @click="handleClickEvent('overLook', detail)">
+            <div class="btn center-btn" @click="handleClickEvent('overLook', detail)">
               VR俯瞰
             </div>
             <div
-              class="btn"
+              class="btn right-btn"
               @click="handleClickEvent('intensiveReading', detail)"
             >
               党史精读
@@ -172,15 +172,17 @@ export default {
       }
       .btns {
         height: 20%;
-        padding: 0px 50px;
+        padding: 2vw 6vw;
         display: flex;
         justify-content: space-around;
+        .left-btn{background: url(../../assets/images/left-btn.png) no-repeat center center;}
+        .center-btn{background: url(../../assets/images/center-btn.png) no-repeat center center;}
+        .right-btn{background: url(../../assets/images/right-btn.png) no-repeat center center;}
         .btn {
           width: 160px;
           height: 36px;
           line-height: 36px;
           text-align: center;
-          background: url(../../assets/images/btn-bg.png) no-repeat;
           background-size: 100% 100%;
           cursor: pointer;
           font-size: 16px;