oil-station/fuintAdmin/src/views/EventMarketing/center/index.vue

<template>
<!--  活动中心-->
  <div class="app-container">
<!--    <el-card style="margin-bottom: 20px">-->
<!--      <el-radio-group v-model="value">-->
<!--        <el-radio-button label="1">消费有礼</el-radio-button>-->
<!--        <el-radio-button label="2">折扣营销</el-radio-button>-->
<!--        <el-radio-button label="3">满减营销</el-radio-button>-->
<!--        <el-radio-button label="4">新人有礼</el-radio-button>-->
<!--        <el-radio-button label="5">推荐有礼</el-radio-button>-->
<!--      </el-radio-group>-->
<!--    </el-card>-->
    <div class="fji" >
      <div class="wrap-box" @click="gobox(1)" >
        <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="./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="./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="./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="./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="./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>
      </div>
      <div class="wrap-box" @click="gobox(7)" >
        <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">Card issuing gift</div>
        </div>
        <div class="bottom-box">
          <div>发卡有礼</div>
        </div>
      </div>
    </div>



<!--    <activeConsumption v-if="value == 1"></activeConsumption>-->
<!--    <activeDiscount v-if="value == 2"></activeDiscount>-->
<!--    <activeFullminus v-if="value == 3"></activeFullminus>-->
<!--    <activeNewlyweds v-if="value == 4" ></activeNewlyweds>-->
<!--    <activeRecommend v-if="value == 5"></activeRecommend>-->
    <!-- 添加或修改兑换券对话框 -->
  </div>
</template>
<script>

import activeDiscount from '../activeDiscount/index'
import activeNewlyweds from '../activeNewlyweds/index'
import activeConsumption from '../activeConsumption/index'
import activeFullminus from '../activeFullminus/index'
import  activeRecommend from  '../activeRecommend/index'
export default {
  name: 'Exchange',
  data() {
    return{
      value:1
    }
  },
  created() {


  },
  components:{
    activeNewlyweds,activeConsumption,activeDiscount,activeFullminus,activeRecommend
  },

  methods: {
    gobox(id){
      if(id == 1){
        this.$router.push('/EventMarketing/activeConsumption/index')
      }
      if(id == 2){
        this.$router.push('/EventMarketing/activeDiscount/index')
      }
      if(id == 3){
        this.$router.push('/EventMarketing/activeFullminus/index')
      }
      if(id == 4){
        this.$router.push('/EventMarketing/activeNewlyweds/index')
      }
      if(id == 5){
        this.$router.push('/EventMarketing/activeRecommend/index')
      }
      if(id == 6){
        this.$router.push('/EventMarketing/yijiancoupon/index')
      }
      if(id == 7){
        this.$router.push('/EventMarketing/openCardGift/index')
      }
    },

  }
}
</script>
<style scoped lang="scss">
.app-container{
  width: 100%;
  height: 100vh;
}
.qr-code{
  margin: 0px auto;
}
.wrap-box{
  text-align: center;
  width: 375px;
  height: 316px;
  background: #FFFFFF;
  border-radius: 10px 10px 10px 10px;
  overflow: hidden;
  box-shadow: 0px 2px 4px rgb(31 30 47 / 10%);
  margin-right: 25px;
  cursor: pointer;
  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;
  flex-wrap: wrap;
}
.bottom-box{
  box-sizing: border-box;
  padding: 0px 15px;
  font-size: 18px;
  font-weight: bold;
  padding-bottom: 15px;
}
</style>