调整层级

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">
-              <img src="../images/course/icon-kc-1.png" alt="">
-              <span>课程</span>
+            <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>
+              </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">
-              <img src="../images/course/icon-tk-1.png" alt="">
-              <span>题库</span>
+            <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>
+              </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">
-              <img src="../images/course/icon-kc-1.png" alt="">
-              <span>课程</span>
+            <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>
+              </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">
-              <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="">
+            <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>
+              </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,14 +524,14 @@ export default {
               font-size: 14px;
               color: #3B86FD;
             }
-            .buy {
-              position: absolute;
-              top: 0;
-              right: -0.6px;
-              z-index: 3;
-              width: 34px;
-              height: 16px;
-            }
+          }
+          .buy {
+            position: absolute;
+            top: 1px;
+            right: 0px;
+            z-index: 3;
+            width: 34px;
+            height: 16px;
           }
           .item-pre {
             display: flex;