<template>
	<div class="advertisementModel">
    <el-dialog
      :before-close="handleDialogClose"
      top="3vh"
      title="广告位详情"
      :visible.sync="dialogVisible"
      width="1100px"
    >
     <div>
       <div style="display: flex;margin-bottom: 15px">
         <div style="position: relative;width: 480px;height: 270px;">
           <el-image
             ref="preview"
             style="width: 480px;height: 270px;position: relative"
             :src="infoData.advId==15?lianheImg:temshowImg"
             :preview-src-list="[temshowImg]">
           </el-image>
           <div @click="onPreview()" style="position: absolute;right: 0;bottom: 0;cursor: pointer;">
             <img src="@/assets/img/fangdajing.jpg">
           </div>
         </div>
         <div style="margin-left: 12px">
           <div  v-if="infoData.rank==1"> <span class="title1 title-s">钻石广告位</span> <span v-if="infoData.isExcAct==1" class="s1">活动专享</span></div>
           <div v-if="infoData.rank==2"> <span  class="title2 title-s">黄金广告位</span> <span  v-if="infoData.isExcAct==1" class="s1">活动专享</span></div>
           <div class="name">{{infoData.name}}</div>
           <div class="name1" v-html="infoData.introduce"></div>
           <div class="price-box">
             <div v-if="infoData.advId==15">
               价格： <span class="price">￥<span style="font-size: 20px">{{infoData.productPrice}}</span>/天</span> <span v-if="false" style="text-decoration-line: line-through;color: #999999;margin-left: 10px">原价：￥9600</span>
             </div>
             <div v-else>
               价格： <span class="price">￥<span style="font-size: 20px">{{infoData.productPrice}}</span>/天</span>
             </div>
             <div>
               投放类型：{{typeList[infoData.type]}}
             </div>
           </div>
           <div style="margin: 10px auto;margin-top: 20px">
             投放状态：<span >{{launchStatusList[launchData.launchStatus]}}</span>
           </div>
           <div style="margin: 10px auto;margin-top: 20px">
             投放数量：{{launchData.num}}&nbsp&nbsp 投放天数：{{launchData.day}}
           </div>
           <div style="margin-top: 15px">
             投放总价：<span style="color: #FF2E2F;font-size: 14px;font-weight: bold">￥{{launchData.totalPay}}</span> <span style="color: #676767;font-size: 14px;">（投放费用将于活动结束后结算）</span>
           </div>
         </div>
       </div>
       <div style="width:100%;height: 1px;background: #CCCCCC;margin: 20px auto"></div>
       <!--投放品牌（1）-->
       <div v-if="infoData.type==2||infoData.type==5">
         投放品牌（1）
         <div style="border: 1px solid #e3e5eb;width: 200px;margin-top: 20px">
           <img v-if="infoUser.merUrl" style="width: 200px;height: 119px" :src="infoUser.merUrl" alt="">
           <div style="text-align: center;margin: 10px 0">{{infoUser.brandName}}</div>
         </div>
       </div>
       <div v-if="infoData.type==4">
         投放图片（1）
         <p style="margin-top: 20px" v-if="infoData.advId==16">图片要求：800*600px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==17">图片要求：720*918px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==18">图片要求：720*918px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==20">图片要求：1010*280px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==12">图片要求：340*165px   支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==19">图片要求：702*180px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==8">图片要求：702*280px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==21">图片要求：750*150px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==22">图片要求：750*330px  支持JPG或PNG格式，1MB以内</p>
         <div class="imgsizeCom compalin_img" style="margin-top: 30px">
           <uploadImg ref="uploadImgRef" @uploadResult="uploadResult"
                      :isMultiple="false"   :limitNum='1'></uploadImg>
         </div>
       </div>
       <div v-if="infoData.type==6">
         投放图片（{{launchData.num}}）
         <p style="margin-top: 20px" v-if="infoData.advId==16">图片要求：800*600px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==17">图片要求：720*918px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==18">图片要求：720*918px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==20">图片要求：1010*280px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==12">图片要求：340*165px   支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==19">图片要求：702*180px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==8">图片要求：702*280px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==21">图片要求：750*150px  支持JPG或PNG格式，1MB以内</p>
         <p style="margin-top: 20px" v-if="infoData.advId==22">图片要求：750*330px  支持JPG或PNG格式，1MB以内</p>
         <div class="imgsizeCom compalin_img" style="margin-top: 30px">
           <uploadImg ref="uploadImgRef" @uploadResult="uploadResult"
                      :isMultiple="false"   :limitNum='launchData.num' :hideLength="launchData.num"></uploadImg>
         </div>
       </div>
       <div v-if="infoData.type==1">
         <p>投放视频（{{launchData.num}}）</p>
         <p style="margin-top: 20px">视频要求：单个视频不超过1分钟，支持MP4格式，50MB以内</p>
         <el-row>
           <el-col :span="9" v-if="launchData.num>0">
             <div class="imgsizeCom compalin_img" style="margin-top: 10px;" >
               <uploadImg  ref="uploadImgRefVIdeo" @uploadResult="uploadResult"
                          :isMultiple="true"   :uploadSize="51200" uploadType="video"></uploadImg>
             </div>
           </el-col>
           <el-col :span="9" v-if="launchData.num>1">
             <div class="imgsizeCom compalin_img" style="margin-top: 10px;" >
               <uploadImg  ref="uploadImgRefVIdeo99" @uploadResult="uploadResult99"
                          :isMultiple="true"   :uploadSize="51200" uploadType="video"></uploadImg>
             </div>
           </el-col>
         </el-row>
       </div>
       <!--商品类-->
       <div v-if="infoData.type==3||infoData.isAttachProduct==1"  :style="{visibility: (infoData.type==3||infoData.isAttachProduct==1)&&!showSS?'':'hidden'}">
         <div>
           <p style="margin:20px auto ">投放商品（{{seckenList.length}}/{{launchData.num}}）</p>
             <div  style="display: flex;flex-wrap: wrap">
                 <div  v-for="(item,index) in seckenList" :key="index" style="margin-right: 10px;margin-bottom: 10px">
                   <div class="box-shop1">
                     <el-row>
                       <div>
                         <img :src="item.mainImg" style="width: 200px;height: 200px;margin-top: 15px" alt="">
                       </div>
                       <div style="text-align: left;line-height: 21px;margin-left: 21px;">
                         <div style="margin-top: 5px" class="line_over_2" v-if="item.title">{{item.title}}</div>
                         <div style="margin-top: 5px" class="line_over_2" v-else>{{item.brandName+item.skuModel+item.templateName}}</div>
                         <div>
                           可用库存：{{item.usableStock}}
                         </div>
                         <div class="line_over_1">
                           型号：{{item.skuModel}}
                         </div>
                         <div>
                           <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                           <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                         </div>
                       </div>
                     </el-row>
                     <div style="position: absolute;top: 10px;right: 10px" @click="delShop(index)" v-if="showBtn">
                       <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
                     </div>
                   </div>
                 </div>
               <div  v-if="seckenList.length<launchData.num ">
                 <div @click="showShopList()" class="add">
                   <i class="el-icon-plus" style="font-size: 30px"></i>
                 </div>
               </div>
             </div>
           <div  style="display: flex;flex-wrap: wrap" v-if="infoData.advId==3&&false">
             <div   v-for="(item,index) in ssList">
               <p style="font-weight: bold;margin-bottom: 10px">商品{{index+1}}</p>
                <div style="display: flex;margin-right: 50px;margin-bottom: 20px">
                  <div @click="showShopList(index)" class="add" v-if="!item.skuId">
                    <i class="el-icon-plus" style="font-size: 30px"></i>
                  </div>
                  <div v-else>
                    <div  style="margin-right: 10px;margin-bottom: 10px">
                      <div class="box-shop1">
                        <el-row>
                          <div>
                            <img :src="item.mainImg" style="width: 200px;height: 200px;margin-top: 15px" alt="">
                          </div>
                          <div style="text-align: left;line-height: 21px;margin-left: 21px;">
                            <div style="margin-top: 5px" class="line_over_2" v-if="item.title">{{item.title}}</div>
                            <div style="margin-top: 5px" class="line_over_2" v-else>{{item.brandName+item.skuModel+item.templateName}}</div>
                            <div>
                              可用库存：{{item.usableStock}}
                            </div>
                            <div>
                              型号：{{item.skuModel}}
                            </div>
                            <div>
                              <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                              <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
                            </div>
                          </div>
                        </el-row>
                        <div style="position: absolute;top: 10px;right: 10px" @click="delShop2(index)" v-if="showBtn">
                          <img src="@/assets/img/sale/set4.png" style="cursor: pointer" alt="" >
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="imgsizeCom compalin_img" style="margin-left: 20px">
                    <uploadImg @click.native="temUrlIndex=index" ref="uploadImgRef" @uploadResult="uploadResult2"
                               :isMultiple="false"   :limitNum='1'></uploadImg>
                  </div>
                </div>
             </div>
           </div>
         </div>
       </div>
     </div>

      <span slot="footer" class="dialog-footer" v-if="showBtn">
             <div style="width:100%;height: 1px;background: #CCCCCC;margin: 20px auto"></div>
    <!--<span style="color:#FF2E2F;margin-right: 15px">温馨提示：审核通过后将立即开始投放</span>-->
    <el-button type="primary" @click="save">提交审核</el-button>
  </span>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      top="2vh"
      title="投放商品"
      :visible.sync="showSS"
      width="800px"
    >
      <div style="display: flex">
        <div class="search-item">
          <el-input class="input"  style="width: 300px" clearable v-model="params.search"
                    placeholder="请输入SPU ID/SPU型号/SKU型号"></el-input>
        </div>
        <div style="margin-left: 10px">
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </div>
      </div>
      <el-row :gutter="10">
        <el-col  @click.native="addShop(item,item.checken)" :span="6" v-for="(item,index) in actSkuList"><div class="grid-content bg-purple" style="margin-top: 10px;position: relative;cursor: pointer" >
          <el-card :body-style="{ padding: '0px' }"  shadow="never" >
            <img  style="width: 100%" :src="item.mainImg" class="image">
            <div style="text-align: left;line-height: 18px;margin-left: 12px;margin-bottom: 10px">
              <div style="margin-top: 5px" class="line_over_2" v-if="item.title">{{item.title}}</div>
              <div style="margin-top: 5px" class="line_over_2" v-else>{{item.brandName+item.skuModel+item.templateName}}</div>
              <div style="margin-top: 3px">
                可用库存：{{item.usableStock}}
              </div>
              <div class="line_over_1">
                型号：{{item.skuModel}}
              </div>
              <div>
                <div>优惠价：<span style="color: #a9a9a9">￥{{item.salePrice}} </span> </div>
                <div>批发价：<span style="color: #ff3535">￥{{item.purchasePrice}}</span> </div>
              </div>
            </div>
            <div>
              <div style="position: absolute;top: 10px;left: 10px">
                <img src="./set3.png" style="cursor: pointer" alt="" v-if="item.checken" >
                <img src="./set1.png" style="cursor: pointer" alt="" v-else="item.checken" >
              </div>
            </div>
          </el-card>
        </div>
        </el-col>
      </el-row>
      <pagination
        @eventCurrentChange="eventCurrentChange"
        :total="total"
        :pageSize="params.pageSize"
        :currentPage="params.pageNum"
        :pagerCount='5'
        layout="total, prev, pager, next, jumper"
      ></pagination>
      <span slot="footer" class="dialog-footer">
    <el-button @click="showSS = false,temList=[]">取 消</el-button>
    <el-button type="primary" :disabled="temList.length>launchData.num?true:false" @click="addShopSave">确 定({{temList.length}}/{{launchData.num}})</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import pagination from "@/components/common/pagination";
  import uploadImg from "@/components/common/uploadImg"
  import {_getStorage } from '@/utils/utils'
  export default {
    components: {
      uploadImg,pagination
    },
    name: "advertisementModel",
    data(){
      return{
        lianheImg:require('@/assets/img/lianhe.png'),
        temShopData:{},
        temUrlIndex:0,
        ssList:[],
        total: 0,
        actSkuList:[],
        params: {
          pageSize: 8,
          pageNum: 1,
          search: "",
        },
        showSS:false,
        seckenList:[],
        temshowImg:'',
        infoUser:_getStorage('info')?_getStorage('info'):"",
        // 1：资料待上传，2：审核中，3：审核不通过，4：审核通过并投放（投放中），5：投放结束，6：待结算，7：已结算
        launchStatusList:['','资料待上传','审核中','审核不通过','审核通过并投放（投放中）','投放结束','待结算','已结算'],
        typeList:['','视频类','品牌类','商品类','图片类','直播','弹窗类'],
        infoData:{},
        launchData:{},
        voucherImage:'',
        voucherImage99:'',
        temList:[],
      }
    },
    props: {
      dialogVisible: Boolean,
      launchId:String,
      showBtn:Boolean,
    },
    watch:{
      dialogVisible(n){
        if(n){
          this.temList=[]
          this.ssList=[]
          this.seckenList=[]
          this.getLaunchinfo()
        }
      },
    },
    mounted(){
    },
    methods:{
      addShopSave(){
        this.showSS = false
        // if(this.infoData.advId==3){
        //   if(this.ssList[this.temUrlIndex].temUrl){
        //     this.temShopData.temUrl=this.ssList[this.temUrlIndex].temUrl
        //     this.ssList[this.temUrlIndex]=this.temShopData
        //   }else {
        //     this.temShopData.temUrl=''
        //     this.ssList[this.temUrlIndex]=this.temShopData
        //   }
        // }
        if(this.temList.length>0){
          this.seckenList=JSON.parse(JSON.stringify(this.temList))
          this.temList=[]
        }else {
          this.seckenList=[]
        }
      },
      delShop(index){
        this.seckenList.splice(index,1)
      },
      uploadResult2(res){
        this.$set(this.ssList[this.temUrlIndex],'temUrl',res)
      },
      delShop2(index2){
        //{temUrl:'',skuId:''}
        this.$set(this.ssList[index2],'skuId','')
      },
      addShop(data,type){
        if(!type){
          if(this.infoData.type==3){
            if(this.temList.length==this.infoData.setNum){
              this.$message.error(`最多可投放${this.infoData.setNum}个商品`)
              return
            }
          }
          this.temList.push(data)
          this.temShopData=data
          this.$set(data,'checken',true)
        }else {
          this.$set(data,'checken',false)
          this.temShopData={}
          if(this.temList.length>0){
            let index = this.temList.findIndex(item=>data.skuId==item.skuId)
            this.temList.splice(index,1)
          }
        }
      },
      onSearch() {
        this.params.pageNum = 1;
        this.getActSkuList();
      },
      getActSkuList() {
        this.$axios.post("/etaoadv/productList", {
          ...this.params
        }).then(res => {
          let { code, data } = res.data;
          if (code === 200) {
            this.total = parseInt(data.total);
            data.list.forEach(item=>{
              item.checken=false
              this.seckenList.forEach(e=>{
                if(item.skuId==e.skuId){
                  item.checken=true
                }
              })
            })
            this.actSkuList = data.list;
          }else {
            this.actSkuList=[]
            this.total=0
          }
        })
      },
      eventSizeChange(e) {
        this.params.pageSize = e;
        this.getActSkuList();
      },
      eventCurrentChange(e) {
        this.params.pageNum = e;
        this.getActSkuList();
      },
      showShopList(index=0){
        this.temUrlIndex=index
        if(!this.showBtn){
          this.$message.warning('只能查看')
          return
        }
        this.temList=JSON.parse(JSON.stringify(this.seckenList))
        this.params.pageNum=1
        this.getActSkuList()
        this.showSS=true
      },
      uploadResult(res){
        this.voucherImage = res?res:''
      },
      uploadResult99(res){
        this.voucherImage99 = res?res:''
      },
      save(){
        let p = null
        // 品牌
        if(this.infoData.type==2||this.infoData.type==5){
          p={
            launchId:this.launchId,
            details:[{
              type:2,
              brandId:_getStorage('info').brandId,
            }]
          }
        }
        // 图片
        if(this.infoData.type==4){
          if(!this.voucherImage){
            this.$message.warning('请上传图片！')
            return
          }
          p={
            launchId:this.launchId,
            details:[{
              type:4,
              image:this.voucherImage,
            }]
          }
        }

        // denyu6
        if(this.infoData.type==6&&this.infoData.isAttachProduct==1){
          let arr = this.voucherImage.split(',')
          if(this.launchData.num>this.seckenList.length){
            this.$message.warning('投放商品数量不足！')
            return
          }
          if(this.launchData.num>arr.length){
            this.$message.warning('上传图片数量不足！')
            return
          }
          p={
            launchId:this.launchId,
            details:[{
              type:6,
              image:arr[0],
            }]
          }
          if(this.launchData.num==2){
            p.details.push({type:6,image:arr[1]})
          }
          this.seckenList.forEach(item=>{
            p.details.push({type:6,skuId:item.skuId})
          })
        }
        // 商品类
        if(this.infoData.type==3){
          if(this.launchData.num>this.seckenList.length){
            this.$message.warning('投放商品数量不足！')
            return
          }
          p={
            launchId:this.launchId,
            details:[]
          }
          if(this.seckenList.length>0){
            this.seckenList.forEach(item=>{
              p.details.push({type:3,skuId:item.skuId})
            })
          }
        }
        // 商品类 加图片
        if(this.infoData.type==3&&this.infoData.advId==3&&false){
          let isS=false
          this.ssList.forEach(item=>{
            if(!item.skuId){
              this.$message.warning('投放商品数量不足！')
              isS=true
            }
            if(!item.temUrl){
              this.$message.warning('投放图片数量不足！')
              isS=true
            }
          })
          if(isS){
            return
          }
          p={
            launchId:this.launchId,
            details:[]
          }
          if(this.ssList.length>0){
            this.seckenList.forEach(item=>{
              p.details.push({type:3,skuId:item.skuId,image:item.temUrl})
            })
          }
        }
        // 视频E淘宝
        if(this.infoData.type==1){
          if(!this.voucherImage){
            this.$message.warning('请上传视频！')
            return
          }
          p={
            launchId:this.launchId,
            details:[{
              type:1,
              video:this.voucherImage,
            }]
          }
        }
        if(this.infoData.type==1&&this.infoData.isAttachProduct==1){
          if(!this.voucherImage){
            this.$message.warning('请上传视频！')
            return
          }
          if(this.launchData.num==2){
            if(!this.voucherImage99){
              this.$message.warning('请上传视频！')
              return
            }
          }
          if(this.launchData.num>this.seckenList.length){
            this.$message.warning('投放商品数量不足！')
            return
          }
          p={
            launchId:this.launchId,
            details:[{
              type:1,
              video:this.voucherImage,
            }]
          }
          if(this.launchData.num==2){
            p.details.push({type:1,video:this.voucherImage99})
          }
            this.seckenList.forEach(item=>{
              p.details.push({type:1,skuId:item.skuId})
            })
        }
        this.$axios.post("/etaoAdv2025/launch/setting",p).then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.$message.success('成功');
            this.$emit("resData");
            this.$router.push({path:'/ad/myAdvertisement'})
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      handleDialogClose(){
        this.infoData = {}
        this.$emit("resData");
      },
      getLaunchinfo(){
        this.$axios.get("/etaoAdv2025/launch/info?launchId="+this.launchId).then(res => {
          let { code, data } = res.data;
          if (code == 200) {
            this.temshowImg=data.etaoAdv2025Vo.cover
            this.infoData=data.etaoAdv2025Vo
            this.launchData=data.launch
            this.ssList=[]
            for (let a = 0;a<this.launchData.num;a++){
              this.ssList.push({temUrl:'',skuId:''})
            }
            this.$nextTick(()=>{
              if(data.details&&(data.details.type==3)){
                if(data.details.products.length>0){
                  this.seckenList=data.details.products
                }
              }
              if(data.details&&(data.details.type==1)){
                if(data.details.products&&data.details.products.length>0){
                  this.seckenList=data.details.products
                }
              }
              if(data.details&&Object.keys(data.details).length>0&&(data.details.type==6)){
                if(data.details.images.length>0){
                  if(data.details.products.length>0){
                    this.seckenList=data.details.products
                  }
                }
              }
              if(!!this.$refs.uploadImgRef&&data.details&&Object.keys(data.details).length>0&&(data.details.type==4||data.details.type==6)){
                this.$refs.uploadImgRef.imgsJson.supMainImgs=[]
                if(data.details.images.length>0){
                  data.details.images.forEach(item=>{
                    this.$refs.uploadImgRef.imgsJson.supMainImgs.push({url:item.url})
                  })
                }
              }
              if(!!this.$refs.uploadImgRefVIdeo&&data.details&&data.details.type==1){
                this.$refs.uploadImgRefVIdeo.imgsJson.supMainImgs=[]
                if(data.details.videos.length>0){
                  let url = data.details.videos[0].url
                  this.voucherImage=url
                  this.$refs.uploadImgRefVIdeo.imgsJson.supMainImgs =[{url:url}]
                }
              }
              if(this.launchData.num==2){
                if(!!this.$refs.uploadImgRefVIdeo99&&data.details&&data.details.type==1){
                  this.$refs.uploadImgRefVIdeo99.imgsJson.supMainImgs=[]
                  if(data.details.videos.length>0){
                    let url = data.details.videos[1].url
                    this.voucherImage99=url
                    this.$refs.uploadImgRefVIdeo99.imgsJson.supMainImgs =[{url:url}]
                  }
                }
              }
            })
          } else {
            this.$message.error(res.data.message);
          }
        });
      },
      onPreview() {
        this.$refs.preview.clickHandler();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .box-shop{
    margin-bottom: 10px;
    position: relative;
    width: 360px;
    min-height: 80px;
    background: #FFFFFF;
    border: 1px solid #E4E7ED;
  }
  .text-state2{
    font-size: 14px;
    color: #FFFFFF;
    height: 24px;
    line-height: 24px;
    text-align: center;
    z-index: 9;
    border-radius: 3px;
  }
  .text-state1{
    position: absolute;
    bottom: 50px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    text-align: center;
    line-height: 41px;
    width: 310px;
    height: 41px;
    background: rgba(0,0,0,0.6);
    cursor: pointer;
  }
  .text-state{
    position: absolute;
    top: 0;
    left: 0;
    font-size: 14px;
    color: #FFFFFF;
    height: 24px;
    line-height: 24px;
    text-align: center;
    z-index: 9;
    border-radius: 3px;
  }
  .btn1{
    cursor: pointer;
    font-weight: 400;
    font-size: 14px;
    color: #606266;
    text-align: center;
    line-height: 28px;
    width: 52px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid #DCDFE6;
  }
  .btn{
    cursor: pointer;
    text-align: center;
    line-height: 28px;
    font-weight: 600;
    font-size: 14px;
    color: #FFFFFF;
    width: 66px;
    height: 28px;
    background: #FF6602;
    border-radius: 8px;
  }
</style>
<style lang="scss"  scoped>
  .line_over_2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 36px;
    -webkit-line-clamp: 2;
  }
  .line_over_1{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  .box-shop1{
    position: relative;
    width: 244px;
    height: 352px;
    text-align: center;
    border: 1px solid #e1e1e1;
  }
  .add {
    text-align: center;
    line-height: 352px;
    width: 245px;
    height: 352px;
    background: #F9F9F9;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    cursor: pointer;
  }
  .advertisementModel {
    /deep/ .el-dialog__body{
      padding: 16px 20px 30px;
    }
    .show-model{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
      display: flex; /* 使用Flexbox布局 */
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      z-index: 9999;
      .model-text{
        margin-top: 40px;
        width: 413px;
        height: 40px;
        font-weight: 400;
        font-size: 14px;
        color: #676767;
        text-align: left;
        font-style: normal;
        line-height: 18px;
      }
      .model-btn{
        margin-left: 15px;
        cursor: pointer;
        width: 170px;
        height: 46px;
        line-height: 46px;
        text-align: center;
        color: #FFFFFF;
        font-size: 16px;
        background: #147ef9;
      }
      .model-box{
        height: 358px;
        width: 473px;
        background: #FFFFFF;
        border-radius: 3px;
        .header{
          font-weight: 600;
          font-size: 18px;
          color: #333333;
          text-align: left;
          padding: 20px 20px;
        }
      }
    }
    .btn{
      cursor: pointer;
      text-align: center;
      line-height: 40px;
      color: #FFFFFF;
      width: 190px;
      height: 40px;
      background: linear-gradient( 180deg, #FF9F05 0%, #FF6602 100%);
      border-radius: 20px;
    }
    .btn-text{
      font-weight: bold;
      margin-left: 10px;
      font-size: 14px;
      color: #FF2E2F;
    }
    .title0{
      margin-top: 10px;
      font-weight: bold;
      font-size: 18px;
      color: #333333;
      font-style: normal;
    }
    .title1{
      background: linear-gradient( 270deg, #7632FF 0%, #B366FF 50%, #A020E0 100%), #9500FF;
    }
    .s1{
      border: 1px solid #FF2E2F;
      font-weight: bold;
      font-size: 12px;
      color: #FF2E2F;
      border-radius: 4px;
      padding: 1px 6px;
    }
    .title-s{
      padding: 1px 8px;
      color: #FFFFFF;
      text-align: center;
      line-height: 18px;
      width: 68px;
      height: 18px;
      border-radius: 4px;
    }
    .title2 {
      background: #D59C29;
    }
    .name {
      font-weight: 600;
      font-size: 20px;
      color: #333333;
      margin-left: -10px;
      margin-top: 6px;
      margin-bottom: 10px;
    }
    .name1{
      font-weight: 400;
      font-size: 14px;
      color: #676767;
      font-style: normal;
      line-height: 18px;
    }
    .price-box{
      margin-top: 20px;
      margin-bottom: 10px;
      width: 480px;
      height: 50px;
      background: #F1F1F1;
      border-radius: 10px;
      line-height: 50px;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      .price{
        font-weight: 600;
        font-size: 14px;
        color: #FF2E2F;
      }
    }
  }
</style>
