样式

src/views/mobile/guess/detail.vue

 <template>
     <div class="overfolowWrapper">
-        <div v-if="detailInfo" :style="{backgroundImage:'url('+detailInfo.coverUrl+')'}">
-            <div class="titleWrap">
-                {{detailInfo.guessTitle}}
+        <div v-if="detailInfo">
+            <div class="titleWrap" :style="{backgroundImage:'url('+detailInfo.coverUrl+')'}">
+                <div>
+                    {{detailInfo.guessTitle}}
+                </div>
             </div>
             <div class="timeInfoWrap">
                 <div class="statusInfo">
@@ -602,17 +604,19 @@
             padding-bottom: .3rem;
         }
         > div {
-            background-size: 100% 3.5rem;
-            background-repeat: no-repeat;
-            background-position: top center;
             /*padding-bottom: 1rem;*/
             .titleWrap {
-                background-color: rgba(0, 0, 0, .6);
+                background-size: contain;
+                background-repeat: no-repeat;
+                background-position: top center;
                 font-size: .36rem;
                 font-weight: bold;
                 color: #fff;
                 line-height: .68rem;
-                padding: .9rem .4rem 1.2rem .4rem;
+                >div{
+                    padding: .9rem .4rem 1.2rem .4rem;
+                    background-color: rgba(0, 0, 0, .6);
+                }
             }
             .timeInfoWrap {
                 margin-top: -.2rem;