前端

fuintAdmin/src/views/EventMarketing/CardHolder/index.vue

@@ -6,7 +6,11 @@
     <div class="warp-box">
       <div class="k-box" @click="goDetail(1)" >
         <div class="img-box" id="img1">
-          <img src="https://club.liantuobank.com/assets/images/market/32.png" >
+          <img src="./imgs/dzczk.png" >
+        </div>
+        <div class="p-size">
+          <div class="title_">电子储值卡</div>
+          <div class="size_">Electronic stored value card</div>
         </div>
         <div class="size-box">
           <div class="box-title">电子储值卡</div>
@@ -14,14 +18,22 @@
         </div>
       </div>
       <div class="k-box" @click="goDetail(2)">
-        <div class="img-box" id="img2"> <img src="https://club.liantuobank.com/assets/images/market/12.png" > </div>
+        <div class="img-box" id="img2"> <img src="./imgs/dzlpk.png" > </div>
+        <div class="p-size">
+          <div class="title_">电子礼品卡</div>
+          <div class="size_">Electronic stored value card</div>
+        </div>
         <div class="size-box">
           <div class="box-title">电子礼品卡</div>
           <div class="js">顾客沉淀，充值可获指定奖励,满减提升商品销量和店铺流量 </div>
         </div>
       </div>
       <div class="k-box" @click="goDetail(3)">
-        <div class="img-box" id="img3"> <img src="https://club.liantuobank.com/assets/images/market/11.png" >  </div>
+        <div class="img-box" id="img3"> <img src="./imgs/dztyk.png" >  </div>
+        <div class="p-size">
+          <div class="title_">电子囤油卡</div>
+          <div class="size_">Electronic stored value card</div>
+        </div>
         <div class="size-box">
           <div class="box-title">电子囤油卡</div>
           <div class="js"> 使用便捷 交易安全 易于管理 节约费用 各地加油 积分增值服务 插卡加油 自动结算 </div>
@@ -33,15 +45,19 @@
     <div class="warp-box">
       <div class="k-box" @click="goDetail(4)" >
         <div class="img-box" id="img4">
-          <img src="https://club.liantuobank.com/assets/images/market/02.png" >
+          <img src="./imgs/yhq.png" >
         </div>
+        <div class="s-size">电子优惠券</div>
+        <div class="x-size">Electronic coupons</div>
         <div class="size-box">
           <div class="box-title">电子优惠券</div>
           <div class="js">因为为客户提供更优质的服务取得了突破性进展，“刷卡加油”引领成品油零售市场新潮流</div>
         </div>
       </div>
       <div class="k-box" @click="goDetail(5)">
-        <div class="img-box" id="img5"> <img src="https://club.liantuobank.com/assets/images/market/26.png" > </div>
+        <div class="img-box" id="img5"> <img src="./imgs/yhq.png" > </div>
+        <div class="s-size">电子兑换券</div>
+        <div class="x-size">Electronic redemption vouchers</div>
         <div class="size-box">
           <div class="box-title">电子兑换券</div>
           <div class="js">顾客沉淀，充值可获指定奖励,满减提升商品销量和店铺流量 </div>
@@ -85,7 +101,7 @@
 <style scoped lang="scss">
   .app-container{
     width: 100%;
-    height: 86vh;
+    height: 100vh;
     background: #f6f8f9;
   }
   .warp-box{
@@ -94,20 +110,54 @@
     flex-wrap: wrap;
   }
   .k-box{
-    width: 100%;
     box-shadow: 0px 2px 4px rgba(31,30,47,0.1);
     background-color: #fff;
     border-radius: 6px;
-    width: 20%;
+    width: 355px;
+    height: 334px;
     margin-right: 15px;
     margin-bottom: 15px;
     overflow: hidden;
     cursor: pointer;
+    box-sizing: border-box;
+    padding: 20px;
+    position: relative;
   }
+  .s-size{
+    position: absolute;
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    color: #333333;
+    width: 315px;
+    top: 70px;
+  }
+  .x-size{
+    position: absolute;
+    text-align: center;
 
+    font-size: 12px;
+    color: #b8b8b8;
+    width: 315px;
+    top: 140px;
+  }
+  .p-size{
+    position: absolute;
+    left: 82px;
+    top: 50px;
+    color: #FFFFFF;
+  }
+  .title_{
+    font-size: 17px;
+    color: #FFFFFF;
+  }
+  .size_{
+    font-size: 11px;
+    color: #EDE1CF;
+  }
   .img-box{
     height: 200px;
-    background: #00afff;
+
     display: flex;
     align-items: center;
     justify-content: center;
@@ -139,26 +189,33 @@
     margin-bottom: 15px;
   }
   #img1{
-
+  width: 315px;
+    height: 215px;
     /*background: url("https://club.liantuobank.com/assets/images/market/32.png") center no-repeat;*/
     /*background-size:100% 100%;*/
-    background: -webkit-linear-gradient(left,#8be8ff,#6cc9e0);
+
   }
   #img2{
+    width: 315px;
+    height: 215px;
     /*background: url("https://club.liantuobank.com/assets/images/market/12.png") center no-repeat;*/
     /*background-size:100% 100%;*/
-    background: -webkit-linear-gradient(left,#f7b978,#ff8300);
+
   }
   #img3{
+    width: 315px;
+    height: 215px;
     /*background: url("https://club.liantuobank.com/assets/images/market/11.png") center no-repeat;*/
     /*background-size:100% 100%;*/
-    background: -webkit-linear-gradient(left,#b4d6a8,#95ce81);
+
   }
   #img4{
-    background: -webkit-linear-gradient(left,rgba(57,184,212,0.68),#007992);
+    width: 315px;
+    height: 215px;
   }
   #img5{
-    background: -webkit-linear-gradient(left,#9cbde8,#009cff);
+    width: 315px;
+    height: 215px;
   }
 
 </style>

fuintAdmin/src/views/EventMarketing/center/index.vue

@@ -12,37 +12,61 @@
 <!--    </el-card>-->
     <div class="fji" >
       <div class="wrap-box" @click="gobox(1)" >
-        <img src="../../../assets/images/xfyl.png" style="width: 260px;height: 260px;margin: 0 auto " >
+        <img src="./imgs/xfyl.png" style="width: 315px;height: 265px;margin: 0 auto " >
+        <div class="p-r-title">
+          <div style="font-size: 24px;font-weight: bold" >消费有礼</div>
+          <div style="font-size: 12px">Consumption is polite</div>
+        </div>
         <div class="bottom-box">
           <div>消费有礼</div>
         </div>
       </div>
       <div class="wrap-box" @click="gobox(2)" >
-        <img src="../../../assets/images/zkyx.png" style="width: 260px;height: 260px;margin: 0 auto " >
+        <img src="./imgs/zkyx.png" style="width: 315px;height: 265px;margin: 0 auto " >
+        <div class="p-r-title">
+          <div style="font-size: 24px;font-weight: bold" >折扣营销</div>
+          <div style="font-size: 12px">Discount marketing</div>
+        </div>
         <div class="bottom-box">
           <div>折扣营销</div>
         </div>
       </div>
       <div class="wrap-box" @click="gobox(3)" >
-        <img src="../../../assets/images/mjyx.png" style="width: 260px;height: 260px;margin: 0 auto " >
+        <img src="./imgs/mjyx.png" style="width: 315px;height: 265px;margin: 0 auto " >
+        <div class="p-r-title">
+          <div style="font-size: 24px;font-weight: bold" >满减营销</div>
+          <div style="font-size: 12px">Consumption is polite</div>
+        </div>
         <div class="bottom-box">
           <div>满减营销</div>
         </div>
       </div>
       <div class="wrap-box" @click="gobox(4)" >
-        <img src="../../../assets/images/xryl.png" style="width: 260px;height: 260px;margin: 0 auto " >
+        <img src="./imgs/xryl.png" style="width: 315px;height: 265px;margin: 0 auto " >
+        <div class="p-r-title">
+          <div style="font-size: 24px;font-weight: bold" >新人有礼</div>
+          <div style="font-size: 12px">Full reduction marketing</div>
+        </div>
         <div class="bottom-box">
           <div>新人有礼</div>
         </div>
       </div>
       <div class="wrap-box" @click="gobox(5)" >
-        <img src="../../../assets/images/tjyl.png" style="width: 260px;height: 260px;margin: 0 auto " >
+        <img src="./imgs/tjyl.png" style="width: 315px;height: 265px;margin: 0 auto " >
+        <div class="p-r-title">
+          <div style="font-size: 24px;font-weight: bold" >推荐有礼</div>
+          <div style="font-size: 12px">Newcomers are polite</div>
+        </div>
         <div class="bottom-box">
           <div>推荐有礼</div>
         </div>
       </div>
       <div class="wrap-box" @click="gobox(6)" >
-        <img src="../../../assets/images/tjyl.png" style="width: 260px;height: 260px;margin: 0 auto " >
+        <img src="./imgs/yjfq.png" style="width: 315px;height: 265px;margin: 0 auto " >
+        <div class="p-r-title">
+          <div style="font-size: 24px;font-weight: bold" >一键发券</div>
+          <div style="font-size: 12px">One click coupon issuance</div>
+        </div>
         <div class="bottom-box">
           <div>一键发券</div>
         </div>
@@ -115,15 +139,27 @@ export default {
   margin: 0px auto;
 }
 .wrap-box{
-  width: 19%;
   text-align: center;
+  width: 375px;
+  height: 316px;
   background: #FFFFFF;
-  border-radius: 8px;
+  border-radius: 10px 10px 10px 10px;
   overflow: hidden;
   box-shadow: 0px 2px 4px rgb(31 30 47 / 10%);
-  margin-right: 15px;
+  margin-right: 25px;
   cursor: pointer;
-  margin-bottom: 15px;
+  margin-bottom: 25px;
+  box-sizing: border-box;
+  padding: 15px;
+  position: relative;
+}
+.p-r-title{
+  position: absolute;
+  left: 40px;
+  top: 20px;
+  color: #fff;
+  width: 200px;
+  text-align: left;
 }
 .fji{
   display: flex;