调整层级

src/views/index.vue

@@ -31,10 +31,12 @@
         <div :id="'subject_1_' + index" class="subject" v-for="(item, index) in gjFirstSubjectModelList" :key="index">
           <p>{{item.name}}<span v-show="item.code">（{{item.code}}）</span></p>
           <ul class="item-wrapper">
-            <li @click="coopDetails(item, 1)" v-if="item.openFlag" class="item">
+            <li @click="coopDetails(item, 1)" v-if="item.openFlag" class="item-rel">
+              <img v-if="item.bindCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              <div class="item">
                 <img src="../images/course/icon-kc-1.png" alt="">
                 <span>课程</span>
-              <img v-if="item.bindCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              </div>
             </li>
             <li v-if="!item.openFlag && item.resourceModelList.length" class="item-pre">
               <div class="pre">
@@ -44,10 +46,12 @@
               <p v-show="item.predictTime">{{formatTime2(item.predictTime)}}上线</p>
             </li>
 
-            <li @click="coopDetails(item, 2)" v-if="item.directoryList.length" class="item tk">
+            <li @click="coopDetails(item, 2)" v-if="item.directoryList.length" class="item-rel">
+              <img v-if="item.bindDirectoryCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              <div class="item tk">
                 <img src="../images/course/icon-tk-1.png" alt="">
                 <span>题库</span>
-              <img v-if="item.bindDirectoryCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              </div>
             </li>
           </ul>
         </div>
@@ -57,10 +61,12 @@
         <div :id="'subject_0_' + index" class="subject" v-for="(item, index) in zjFirstSubjectModelList" :key="index">
           <p>{{item.name}}<span v-show="item.code">（{{item.code}}）</span></p>
           <ul class="item-wrapper">
-            <li @click="coopDetails(item, 1)" v-if="item.openFlag" class="item">
+            <li @click="coopDetails(item, 1)" v-if="item.openFlag" class="item-rel">
+              <img v-if="item.bindCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              <div class="item">
                 <img src="../images/course/icon-kc-1.png" alt="">
                 <span>课程</span>
-              <img v-if="item.bindCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              </div>
             </li>
             <li v-if="!item.openFlag && item.resourceModelList.length" class="item-pre">
               <div class="pre">
@@ -69,10 +75,12 @@
               </div>
               <p v-show="item.predictTime">{{formatTime2(item.predictTime)}}上线</p>
             </li>
-            <li @click="coopDetails(item, 2)" v-if="item.directoryList.length" class="item tk">
+            <li @click="coopDetails(item, 2)" v-if="item.directoryList.length" class="item-rel">
+              <img v-if="item.bindDirectoryCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              <div class="item tk">
                 <img src="../images/course/icon-tk-1.png" alt="">
                 <span>题库</span>
-              <img v-if="!item.bindDirectoryCardStatus" class="buy" src="../images/course/icon-buy.png" alt="">
+              </div>
             </li>
           </ul>
         </div>
@@ -487,6 +495,12 @@ export default {
           flex-direction: row;
           justify-content: space-between;
           margin-bottom: 20px;
+          .item-rel {
+            position: relative;
+            top: 0;
+            left: 0;
+            z-index: 3;
+          }
           .item {
             position: relative;
             top: 0;
@@ -510,15 +524,15 @@ export default {
               font-size: 14px;
               color: #3B86FD;
             }
+          }
           .buy {
             position: absolute;
-              top: 0;
-              right: -0.6px;
+            top: 1px;
+            right: 0px;
             z-index: 3;
             width: 34px;
             height: 16px;
           }
-          }
           .item-pre {
             display: flex;
             flex-direction: column;