实验台等修复

src/pages/match/details/index.vue

@@ -104,7 +104,7 @@ export default {
 .banner{
     width: 100%;
     height: 350px;
-    background-size: 100vw 350px;
+    background-size: 100% 350px;
     background-repeat: no-repeat;
 }
 .main .center-wrap {

src/pages/record/show/index.vue

@@ -293,6 +293,7 @@ export default {
         li {
             display: inline-flex;
             width: 25%;
+            padding: 0 10px;
             margin-bottom: 34px;
         }
         &.edit {
@@ -303,6 +304,7 @@ export default {
         label {
             font-size: 14px;
             color: #333;
+            white-space: nowrap;
         }
         span {
             min-width: 150px;

src/pages/station/list/index.vue

@@ -11,10 +11,13 @@
         <div class="station">
             <div class="inner">
                 <template v-for="(item,index) in curriculumList">
-                    <a class="item" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)">
+                    <div class="item" :title="item.curriculumName" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)">
                         <img :src="item.coverUrl" alt="">
-                        <p class="text" :title="item.curriculumName"><span>{{ item.curriculumName }}</span></p>
-                    </a>
+                        <div class="bottom">
+                            <p class="text"><span>{{ item.curriculumName }}</span></p>
+                            <a>进入实验</a>
+                        </div>
+                    </div>
                 </template>
             </div>
         </div>
@@ -94,25 +97,32 @@ export default {
     }
     .item {
         position: relative;
-        width: 256px;
-        height: 195px;
-        margin: 0 6px 4px;
+        padding: 0 10px;
+        margin: 0 10px 40px;
+        text-align: center;
+        background-color: #fff;
+        border-radius: 8px;
         cursor: pointer;
         &:hover {
             opacity: .9;
         }
         img {
-            width: 100%;
-            height: 100%;
+            width: 215px;
+            height: 118px;
+            margin-top: -20px;
         }
-        .text {
-            position: absolute;
-            bottom: 14px;
-            left: 25px;
+        .bottom {
             display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 5px;
+        }
+        .text {
+            display: inline-flex;
             align-items: center;
             width: 130px;
-            height: 50px;
+            height: 40px;
+            text-align: left;
             font-size: 12px;
             line-height: 1.6;
             overflow: hidden;
@@ -120,6 +130,14 @@ export default {
                 @include mul-ellipsis(2);
             }
         }
+        a {
+            padding: 0 8px;
+            line-height: 28px;
+            font-size: 14px;
+            color: #7A7A7A;
+            border-radius: 20px;
+            border: 1px solid #DADADA;
+        }
     }
 }
 </style>