21天模板改为平铺

src/views/tool.vue

@@ -24,14 +24,16 @@
     <!-- 21天模板 -->
     <div id="posterCon" class="posterCon_21" v-if="days==21||days==150">
       <div id="posterBox">
-        <img :src="templateUrl">
+        <div id="poster21Box" :style="{background: uploadPic?'none':backgroundColor}">
+          <img class="poster21BoxPhoto" :src="uploadPic" v-show="uploadPic">
+          <img class="poster21BoxBg" :src="templateUrl">
+        </div>
         <div id="posterBoxText">
           <p>{{posterText2}}</p>
           <p>{{posterText1}}</p>
         </div>
         <div id="addpicBox">
           <img @click="selectPic" src="../assets/addpic.png">
-          <img :src="uploadPic" v-show="uploadPic">
         </div>
         <div id="posterBom">
           <div id="posterTime">
@@ -93,14 +95,18 @@
     </div>
     <!-- 21天海报 -->
     <div id="posterOut" v-if="days==21||days==150">
-      <img :src="templateUrl">
+      <!-- <img :src="templateUrl"> -->
+      <div id="posterOut21Box">
+        <img class="poster21BoxPhoto" :src="uploadPic" v-show="uploadPic">
+        <img class="poster21BoxBg" :src="templateUrl">
+      </div>
       <div id="posterOutText">
         <p>{{posterText2}}</p>
         <p>{{posterText1}}</p>
       </div>
-      <div id="posterOutAddpicBox">
+      <!-- <div id="posterOutAddpicBox">
         <img :src="uploadPic">
-      </div>
+      </div> -->
       <div id="posterOutBom">
         <div id="posterOutTime">
           <div :style="{background: backgroundColor}">
@@ -606,6 +612,21 @@ export default {
     width: 100%;
     height: 440px;
     position: relative;
+    #poster21Box{
+      height: 77.8%;
+      width: 100%;
+      position: relative;
+      img{
+        height: 100%;
+        width: 100%;
+      }
+      .poster21BoxPhoto{
+        position: absolute;
+      }
+      .poster21BoxBg{
+        position: absolute;
+      }
+    }
     >img{
       height: 77.8%;
       width: 100%;
@@ -862,6 +883,21 @@ export default {
     // position: relative;
     // top: 0;
     z-index: 999999;
+    #posterOut21Box{
+      height: 72%;
+      width: 100%;
+      position: relative;
+      img{
+        height: 100%;
+        width: 100%;
+      }
+      .poster21BoxPhoto{
+        position: absolute;
+      }
+      .poster21BoxBg{
+        position: absolute;
+      }
+    }
     >img{
       height: 72%;
       width: 100%;