修改

src/components/StoreDesign/liveConfig.vue

 <style>
-  .customPoster .custom_Main {
+  .liveConfig .custom_Main {
     display: flex;
   }
 
-  .custom_mobile_box {
+  .liveConfig .custom_mobile_box {
     width: 400px;
     height: 740px;
     padding: 35px 11px;
@@ -14,7 +14,7 @@
     flex-direction: column;
   }
 
-  .custom_bg_box {
+  .liveConfig .custom_bg_box {
     position: relative;
     border: 1px solid #e2e3e3;
     width: 750px;
@@ -22,22 +22,21 @@
     zoom: 0.5;
   }
 
-  .custom_bg_pic {
-
+  .liveConfig .custom_bg_pic {
     width: 100%;
     height: 100%;
     background-size: 100% 100%;
     background-position: center;
   }
 
-  .custom_AppImage {
+  .liveConfig .custom_AppImage {
     background: url('../../assets/img/default_qr_code.png') no-repeat;
     background-size: cover;
     background-position: center center;
     position: absolute;
   }
 
-  .custom_formBody {
+  .liveConfig .custom_formBody {
     padding: 20px 35% 20px 20px;
     background-color: #fff;
     margin-bottom: 20px;
@@ -48,17 +47,7 @@
     display: flex;
     flex-direction: column;
   }
-
-  .ccustom_itemremove {
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    width: 28px;
-    height: 28px;
-  }
-
-  .custom_bottom {
+  .liveConfig .custom_bottom {
     border: 1px solid #EBEEF5;
     background-color: #FFF;
     color: #303133;
@@ -68,7 +57,7 @@
     margin-top: 35px;
   }
 
-  .customShareBtn {
+  .liveConfig .customShareBtn {
     position: absolute !important;
     bottom: -52px;
     left: 0;
@@ -77,300 +66,9 @@
   .customShareBtn .el-button--small {
     padding: 9px 25px;
   }
-
-  .Custom_active {
-    border: 1px solid #7BBDFC;
-  }
-
-  .custom_headerImg {
-    background: url('../../assets/img/storeDesign/default_head.png') no-repeat;
-    background-size: cover;
-    background-position: center center;
-    border-radius: 50%;
-    position: absolute;
-  }
-
-  .poster_bg_box {
-    position: relative;
-    border: 2px solid #e2e3e3;
-    width: 750px;
-    height: 1334px;
-    zoom: 0.5;
-    overflow: hidden;
-  }
-
-  .customPoster .poster_User {
-    margin-top: 96px;
-    margin-bottom: 64px;
-  }
-
-  .poster_User img {
-    height: 90px;
-    width: 90px;
-    border-radius: 50%;
-    margin-left: 24px;
-    display: block;
-  }
-
-  .poster_User div {
-    background: #f1f1f1;
-    padding: 0 24px;
-    height: 54px;
-    color: #4b4b4b;
-    margin-left: 24px;
-    border-radius: 30px;
-  }
-
-  .poster_goodImg {
-    margin: 0 auto;
-    height: 702px;
-    width: 702px;
-    overflow: hidden;
-    border-radius: 16px 16px 0 0;
-  }
-
-  .customPoster .goodsone_bg {
-    height: 310px;
-    margin: 0 auto;
-    width: 702px;
-    padding: 0 28px;
-    background: #ffffff;
-    border-radius: 0 0 16px 16px;
-  }
-
-  .goodsone_bg .goods-name {
-    padding: 28px 0;
-    font-size: 34px;
-    color: #353535;
-  }
-
-  .customPoster .goods_price {
-    padding-top: 50px;
-    color: #ff4544;
-  }
-
-  .customPoster .goods_remark {
-    margin-top: 28px;
-    color: #999999;
-    font-size: 28px;
-  }
-
-  .goodsone_bg img {
-    height: 230px;
-    width: 230px;
-    margin-left: auto;
-    display: block;
-    border-radius: 50%;
-  }
-
-  .custom_Second {
-    height: 750px;
-    width: 750px;
-    overflow: hidden;
-  }
-
-  .custom_SecondBG {
-    background-image: url('../../assets/img/storeDesign/style-two-end.png');
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    height: 600px;
-    width: 702px;
-    position: relative;
-    left: 24px;
-    top: -40px;
-    padding: 0 24px;
-  }
-
-  .cuSecond_goodsName {
-    font-size: 34px;
-    color: #353535;
-    padding-top: 40px;
-  }
-
-  .customSecond_user {
-    height: 96px;
-    width: 96px;
-    border-radius: 50%;
-    margin-left: 24px;
-    display: block;
-  }
-
-  .CusSecondRemark {
-    height: 52px;
-    width: 100%;
-    padding: 0 24px;
-    color: #353535;
-    background-color: #f1f1f1;
-    font-size: 24px;
-    border-radius: 30px;
-    margin-bottom: 70px;
-  }
-
-  .Second_qrcode {
-    height: 230px;
-    width: 230px;
-    display: block;
-    margin-left: auto;
-  }
-
-  .three_User img {
-    height: 97px;
-    width: 97px;
-    border-radius: 50%;
-    margin-left: 35px;
-    display: block;
-  }
-
-  .app-style-three .three_User div:after {
-    content: "";
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-    background-image: url('../../assets/img/storeDesign/three-love.png');
-    height: 24px;
-    width: 24px;
-    display: inline-block;
-    margin-left: 8px;
-  }
-
-  .cusThree_name {
-    font-size: 34px;
-    padding-top: 28px;
-    color: #353535;
-  }
-
-  .cusThree_price {
-    padding-top: 28px;
-    color: #ff4544;
-  }
-
-  .cusThree_qrcode {
-    width: 702px;
-    border-top: 1px solid #c9c9c9;
-    height: 278px;
-    margin: 0 auto;
-    margin-top: 24px;
-  }
-
-  .cusThree_qrcode div {
-    margin-top: 20px;
-    margin-left: 24px;
-    font-size: 28px;
-    color: #353535;
-  }
-
-  .app-style-four .user {
-    margin-top: 35px;
-    margin-bottom: 35px;
-  }
-
-  .app-style-four .user img {
-    height: 90px;
-    width: 90px;
-    border-radius: 50%;
-    margin-left: 24px;
-    display: block;
-  }
-
-  .app-style-four .user div {
-    background: #f1f1f1;
-    padding: 0 24px;
-    height: 54px;
-    color: #4b4b4b;
-    margin-left: 24px;
-    border-radius: 30px;
-  }
-
-  .app-style-four .four-box {
-    height: 1150px;
-    background-color: #FFFFFF;
-    margin: 0 auto;
-    width: 702px;
-    border-radius: 16px;
-    padding: 0 24px;
-  }
-
-  .app-style-four .goods-name {
-    font-size: 34px;
-    padding-top: 26px;
-    color: #353535;
-  }
-
-  .app-style-four .price {
-    padding-top: 60px;
-    color: #ff4544;
-  }
-
-  .app-style-four .goods-image {
-    height: 650px;
-    width: 650px;
-    margin-top: 60px;
-  }
-
-  .app-style-four .qrcode img {
-    height: 150px;
-    width: 150px;
-    margin-top: 25px;
-  }
-
-  .app-style-four .qrcode div {
-    margin-top: 22px;
-    margin-bottom: 26px;
-    font-size: 24px;
-    color: #999999;
-  }
-
-  .poster-style-box {
-    cursor: pointer;
-    display: inline-block;
-    border: 1px solid #E2E2E2;
-    border-radius: 3px;
-    height: 255px;
-    width: 160px;
-    margin: 5px;
-    padding: 0 5px;
-  }
-
-  .activeCustomer {
-    border: 1px solid #409eff !important;
-  }
-
-  .custom_rightCheck .el-radio {
-    height: 32px;
-    line-height: 32px;
-  }
-
-  .custom_grid {
-    flex-wrap: wrap;
-    height: 100px;
-    width: 100%;
-    background: #E6F4FF;
-    border: 1px solid #b8b8b8;
-  }
-
-  .poster-pic-box {
-    cursor: pointer;
-    display: inline-block;
-    border: 1px solid #E2E2E2;
-    border-radius: 3px;
-    height: 155px;
-    width: 112px;
-    margin: 5px;
-    padding: 0 5px;
-  }
-
-  .customSecond_btmdiv {
-    border-top: 1px solid #E3E3E3;
-    position: absolute;
-    bottom: 0;
-    background-color: #ffffff;
-    z-index: 999;
-    padding: 10px;
-    width: 100%;
-  }
-
 </style>
 <template>
-  <div class="customPoster">
+  <div class="liveConfig">
     <template>
       <div class="custom_Main">
         <div class="custom_mobile_box">
@@ -484,8 +182,8 @@
       }
     },
     mounted() {
-      this.maxTwocodeTop = 1334 - this.ShareMsg.QrCodeSize;
-      this.maxTwocodeLeft = 750 - this.ShareMsg.QrCodeSize;
+      this.maxTwocodeTop = 1334 - this.ShareMsg.LiveQrCodeSize;
+      this.maxTwocodeLeft = 750 - this.ShareMsg.LiveQrCodeSize;
       this.GetLiveConfig();
     }
   };