pk-mall/src/view/publicity/repast/index.vue

<template>
  <div class="login-wrapper">
    <div>
      <indexHeaders :navIndexs="4"/>
    </div>
    <RightSliderBar/>
    <div class="product" v-if="indexPage">
      <div class="product-bg1">
        <img :src="indexPage.a.bg">
        <div class="repeat-content">
          <div class="title">
            {{indexPage.a.title}}
          </div>
          <div class="text">
            {{indexPage.a.desc}}
          </div>
        </div>
      </div>
      <div class="repeat-cen">
        <div class="repeat-views" v-for="item in indexPage.b.list">
          <div class="repeat-img">
            <img :src="item.icon">
          </div>
          <div class="name">{{item.title}}</div>
          <div class="desc" style="margin-bottom: 0">{{item.desc}}</div>
          <div class="desc">{{ item.desc1 }}</div>
        </div>
      </div>
      <div class="repeat-bg2">
        <img :src="indexPage.c.bg">
        <div class="content-s" style="width: 100%;text-align: center;padding-top: 90px">
          <div style="color: #fff;font-size: 45px">{{indexPage.c.title}}</div>
          <div style="color: #999;font-size: 20px;margin-top: 28px">{{indexPage.c.title_en}}</div>
          <div class="content-lists" style="padding: 0 260px">
            <div class="lists" style="display: flex;justify-content: space-between" v-for="item in indexPage.c.list">
              <div class="name">{{item.title}}</div>
              <div class="">
                <img src="@/assets/img/indexIcon.png" style="width: 40px;height: 14px;margin-top: 5px">
              </div>
              <div class="desc">{{item.desc}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="repeat-bg3">

        <img :src="indexPage.d.bg">
        <div class="content-s" style="width: 100%;text-align: center;padding-top: 90px">
          <div style="color: #fff;font-size: 45px">{{indexPage.d.title}}</div>
          <div style="color: #999;font-size: 20px;margin-top: 28px">{{indexPage.d.title_en}}</div>
        </div>
        <div class="repeat-bg3-cen">

          <div class="repeat-bg3-view" v-for="(item,index) in indexPage.d.list" @mouseenter="indexSortSlide(index)" @mouseleave="indexSortOut()"  >
            <img :src="item.image">
            <div class="texts" >
              {{ item.title }}
            </div>

            <div class="shade" :class="index===sortIndex?'show':''">
              <div class="sel">
                <img src="http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast22.png?12321">

              </div>
              <div class="content" >
                <div class="name">
                  {{item.desc }}
<!--                  {{items.desc}}-->
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
      <div class="repeat-bg4">

        <img :src="indexPage.e.bg">
        <div class="content-s" style="height: 280px;width: 100%;text-align: center">
          <div class="title_s" style="color: #fff;padding-top:88px;font-size: 45px">{{indexPage.e.title}}</div>
          <div class="title_en" style="margin-top: 32px">{{indexPage.e.desc}}</div>
        </div>
        <div class="repeat-bg4-cen">
          <div class="repeat-content">
            <div class="repeat-nav">
              <div class="view" @click="repeatIndexs=index"
                   :class="repeatIndexs==index?'classStyle':''" v-for="(item,index) in indexPage.e.list">
                {{item.title}}
              </div>
            </div>
          </div>
          <div class="repeat" v-for="(item,index) in indexPage.e.list">
            <div v-if="index==repeatIndexs" style="display: flex">
              <div class="repeat-img">
                <img :src="item.image">
              </div>
              <div class="name">
                {{item.desc}}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="repeat-bg5">
        <img :src="indexPage.f.bg">
        <div class="content-s" style="height: 280px;width: 100%;text-align: center">
          <div class="title_s" style="color: #333;padding-top:88px;font-size: 45px">{{indexPage.f.title}}</div>
          <div class="title_en" style="margin-top: 32px">{{indexPage.f.desc}}</div>
        </div>
        <div class="index-swiper-center">
          <swiper
              :modules="modules"
              :pagination="{ clickable: true }"
              :autoplay="autoplayOptions"
              @swiper="onSwiper"
              @slideChange="onSlideChange"
              :navigation="navigation"
          >
            <swiper-slide v-for="item in indexPage.f.list">
              <div class="banner">
                <img :src="item.image" alt="">

              </div>
            </swiper-slide>

          </swiper>
        </div>
      </div>

      <div class="product-into" style="padding-bottom: 30px">
        <div class="product-title">
          {{ bottomPage.title }}
        </div>
        <div class="product-desc">{{ bottomPage.title_en }}</div>
        <div class="product-into-content" style="padding-left: 230px;width: 1500px">
          <div class="product-img" v-for="item in bottomPage.list">
            <div class="product-imgs">
              <img :src="item.image" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <Footer/>
</template>

<script setup>
import {getUrlParams2} from "@/utils";

let url=getUrlParams2(window.location.href);
if(url.name){
  document.title=url.name
}
let indexPage=ref("")
let bottomPage=ref('')
let getUserPage=()=>{
  getContentPage({"page":"zhihuicanyin"}).then((res)=>{
    indexPage.value=res.data.content
    bottomPage.value=res.data.hezuodanwei

  })
}
onMounted(()=>{
  getUserPage()
})
//记录访问次数
if(localStorage.getItem('USER__INFO__')){
  user_lsp().then((res)=>{
  })
}
import { provide, reactive, ref ,onMounted} from 'vue'
import UserNav from '@/components/User/UserNav.vue'
import indexHeaders from '@/components/Index/indexHeaders.vue'
import LeftSliderBar from '@/components/Index/LeftSliderBar.vue'
import RightSliderBar from '@/components/Index/RightSliderBar.vue'
import CountDate from '@/components/Index/CountDate.vue'
import Footer from '@/components/Tool/Footer.vue'
import {useI18n} from "@/hooks/web/useI18n";
import {nextTick} from "@vue/runtime-core";
import { Swiper, SwiperSlide } from 'swiper/vue'
// 引入swiper样式（按需导入）
import 'swiper/css'
import 'swiper/css/pagination' // 轮播图底面的小圆点
import 'swiper/css/navigation' // 轮播图两边的左右箭头
import 'swiper/css/scrollbar'  // 轮播图的滚动条
const swiperList = [
  { image: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast1.jpeg' },
  { image: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast2.jpeg' },
  { image: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast3.jpeg' },
  { image: 'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast4.jpeg' }
]
// 引入swiper核心和所需模块
import { Autoplay, Pagination, Navigation, Scrollbar } from 'swiper'
import {useRouter} from "vue-router";
import {useUserStore} from "@/store/modules/user";
import {checkToken, getContentPage, user_lsp} from "@/api/menu1";
// 在modules加入要使用的模块
const modules = [Autoplay, Pagination, Navigation, Scrollbar]
const currentChange = ref(0)
const autoplayOptions = {
  delay: 50000,
  disableOnInteraction: false,
  loop: false,
  pauseOnMouseEnter: true,
  reverseDirection: true
}
const onSwiper = (swiper) => {
}
const onSlideChange = (e) => {
  // swiper切换的时候执行的方法
  console.log('slide change', e.activeIndex)
  currentChange.value = e.activeIndex
}
const remainTime = ref(null)
const navigation = {
  nextElRef: '.swiper-button-next',
  prevElRef: '.swiper-button-prev'
}
const { t } = useI18n()
const repeatNav=['设备管理','门店管理','分类管理','对接系统']
const repeatList=ref([
  {name:'品牌',desc:'增强竞争力',desc1:'提升门店形象',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast20.png'},
  {name:'人工',desc:'机器代替人工 ',desc1:'多店一键同步更新',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast16.png'},
  {name:'管理',desc:'门店分级管理 ',desc1:'更换菜单更便捷',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast23.png'},
  {name:'高效',desc:'避免错漏单 ',desc1:'提升营业额',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast14.png'}
])
const content=[
  {id:0,name:'系统兼容多种设备，可对不同区域的不同设备',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast15.jpg',},
  {id:0,name:'可实现营销活动、广告等宣传内容，一键发布全国所有门店，降低品牌管理难度。',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast19.jpg',},
  {id:0,name:'总部可根据 不同区域，不同时段，对不同门店的推广内容，进行差异化投放。',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast18.jpg',},
  {id:0,name:'系统具备严格的用户权限管理机制，支持多级用户管理机制。。',img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast13.jpg',},
]
const repastLists=[
  {id:0,name:'移动电子水牌系列',desc:'门口｜移动电子水牌',list:['门口｜引流平吸引顾客'],img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast19.jpg',},
  {id:1,name:'数字标牌系列',desc:'橱窗｜双面广告宣传',list:['电子餐牌｜高效点餐','等候区｜广告推荐美食','叫号区｜排队信息获取','橱窗｜美食广告引流'],img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast13.jpg',},
  {id:2,name:'电容触摸系列',desc:'电子餐牌｜高效点餐',list:['自助点餐区｜电容触摸屏'],img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/repast/repast24.png',},
]
const sortIndex = ref(null)
let repeatIndexs = ref(0)
const sortFlag = ref(false)
const logoList=ref([
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon8.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon9.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon10.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon11.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon12.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon1.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon7.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon6.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon5.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon4.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon3.png'},
  {img:'http://screen-test.zhousi.hdlkeji.com/aksdbn/img/publicity/logo-icon2.png'},
])
const FormState = reactive({
  name: '',
  phone: '',
})
const rules = {
  name: [{ required: true, message: t('home.login.form.accountRequired'), trigger: 'blur' }],
  phone: [{ required: true, message: t('home.login.form.phonePlaceholder'), trigger: 'blur' }],
}
const indexSortSlide = (index) =>{
  console.error(index)
  sortIndex.value=index
  sortFlag.value=true
}
const indexSortOut = () =>{
  sortFlag.value=false
  sortIndex.value=null
}
</script>

<style lang="less" scoped >
.content-lists{
  margin-top: 80px;
  .lists{
    color: #fff;
    margin-bottom: 70px;
    font-size: 16px;
    .name{
      width: 160px;
      text-align: left;
      word-break: break-all;
      font-size: 18px;
      line-height: 24px;
    }
    .desc{
      width: 970px;
      text-align: left;
      font-size: 18px;
      line-height: 24px;
      //margin-left: 100px;
    }
  }
}
.title_s{
  color: #333;
  font-size: 40px;
  padding-top: 40px;
  padding-left: 8px;
}
.title_en{
  color: #999;
  font-size: 22px;
  margin-top: 33px;
}
.title-desc{
  color: #333;
  font-size: 18px;
  margin-top: 78px;
  width: 800px;
  line-height: 24px;

}
.content-s{
  position: relative;
  width: 1400px;
  text-align: left;
  height: 200px;
  margin: 0 auto;

}
.banner{
  img{
    height: 500px!important;
    width: 1300px!important;
  }
}
/deep/ .swiper-pagination{
  display: none;
}
.swiper{
  height: 500px;
}
.show{
  display: block!important;
}
.repeat-bg5{
  height: 900px;
  margin-top: -10px;
  img{
    height: 900px;
    width: 100%;
    position: absolute;
  }
  .index-swiper-center{
    width: 1300px;
    height: 500px;
    //background-color: #333;
    margin-left: 10px;
    position: relative;
    padding: 20px 0 0 300px;
  }
}
.repeat-bg4{
  height: 900px;
  margin-top: -10px;
  img{
    height: 900px;
    width: 100%;
    position: absolute;
  }
  .repeat-bg4-cen{
    padding: 20px 260px;
    position: relative;
    .repeat{
      margin-top: 80px;
      .repeat-img{
        width: 350px;
        img{
          width: 350px;
          height: 350px;
        }
      }
      .name{
        color: #fff;
        margin: 60px 0 0 50px;
        width: 900px;
        line-height: 24px;
      }
    }
    .repeat-content{
      .repeat-nav{
        display: flex;
        .classStyle{
          border-bottom: 2px solid #3171B8!important;
          color: #3171B8!important;
        }
        .view{
          cursor: pointer;
          color: #fff;
          font-size: 20px;
          padding-bottom: 25px;
          width: 320px;
          text-align: center;
          border-bottom: 2px solid #FFFFFF;
        }
      }
    }
  }
}
.repeat-bg3{
  height: 940px;
  margin-top: -10px;
  img{
    height: 938px;
    width: 100%;
    position: absolute;
  }
  .repeat-bg3-cen{
    position: relative;
    padding: 10px 260px;
    z-index: 1;
    display: flex;
    .repeat-bg3-view:nth-child(1){
      margin-left: 0;
    }
    .repeat-bg3-view{
      width: 400px;
      height: 375px;
      position: relative;
      margin-left: 100px;
      cursor: pointer;
      .show{
        display: block;
      }
      .shade{
        display: none;
        width: 360px;
        height: 180px;
        background: rgba(65,113,179,0.7);
        backdrop-filter: blur(3px);
        position: absolute;
        bottom: 0;
        padding: 20px;
        .content{
          .name{
            color: #fff;
            font-size: 22px;
            text-align: center;
            width: 300px;
            word-break: break-all;
            margin-left: 15px;
            margin-top: -10px;
          }
        }
        .sel{
          height: 10px;
          img{
            width: 16px;
            height: 16px;
          }
        }
      }
      .texts{
        position: absolute;
        background-color: #999;
        z-index: 1;
        color: #333;
        text-align: center;
        height: 44px;
        font-size: 18px;
        line-height: 44px;
        width: 400px;
        bottom: 0;
      }
      img{
        width: 400px;
        height: 375px;
        position: absolute;
      }

    }
  }
}
.repeat-bg2{
  height: 750px;
  img{
    height: 750px;
    width: 100%;
    position: absolute;
  }
}
.repeat-cen{
  background: #FFFFFF;
  box-shadow: 1px 12px 20px 8px rgba(218,218,218,0.2);
  width: 1400px;
  margin: 30px auto;
  padding: 50px 0;
  display: flex;
  .repeat-views:nth-child(1){
    margin-left: 120px;
  }
  .repeat-views{
    width: 200px;
    line-height: 24px;
    margin-left: 100px;
    text-align: center;
    .repeat-img{
      img{
        width: 60px;
        height: 60px;
      }
    }
    .name{
      color: #333;
      font-size: 20px;
      margin: 30px 0;
    }
    .desc{
      color: #999;
      font-size: 18px;
      margin-bottom: 10px;
    }
  }
}
/deep/ .from-view .el-input .el-input__inner{
  width: 325px;
  height: 50px;
  font-size: 18px;
}
.product-flow {
  margin: 50px 0;
  img{
    width: 100%;
    height: 585px;
  }
}
.login-wrapper{
  background-color: #F7F8FA;
  .product-bg1{
    height: 600px;
    img{
      height: 600px;
      width: 100%;
      position: absolute;
    }
    .repeat-content{
      position: relative;
      padding: 200px 0 0 260px;
      .title{
        font-size: 50px;
        color: #fff;
        margin-bottom: 20px;
      }
      .text{
        color: #fff;
        font-size: 20px;
      }
    }
  }
  .product-from{
    padding: 0 260px;
    height: 400px;
    img{

      height: 423px;
      position: absolute;
    }
    .product-content{
      position: relative;
      padding-top: 100px;
      z-index: 1;
      .product-sel{
        display: flex;
        justify-content: center;
        .product-views{
          width: 180px;
          height: 50px;
          background: #F0F2F5;
          border-radius: 2px;
          line-height: 50px;
          text-align: center;
          margin-right: 60px;
          cursor: pointer;
          color: #999999;
          box-sizing: border-box;
        }
        .productStyle{
          background: #FFFFFF;
          border: 1px solid #3171B8;
          color: #333333;
        }
      }
      .from{
        display: flex;
        justify-content: center;
        padding: 40px 0;
        .from-view{
          display: flex;
          .name{
            color: #333;
            font-size: 18px;
            width: 80px;
            margin-top: 15px;
          }
        }
      }
    }
  }
  .product-into{
    text-align: center;

    .product-into-content{
      display: flex;
      padding: 30px 0 30px 200px;
      background-color: #F7F8FA;
      flex-wrap: wrap;
      .product-img{
        img{
          width: 320px;
          height: 260px;
        }
        .product-imgs{
          margin-left: 15px;
          margin-bottom: 20px;
          img{
            width: 220px;
            height: 100px;
          }
        }
      }
      .product-width{
        width: 680px;
        margin-left: 40px;
        margin-bottom: 20px;
        .product-img{
          img{
            width: 680px;
            height: 260px;
          }
          video{
            width: 680px;
            height: 260px;
          }
        }
        .product-views{
          padding: 15px 0;
          height: 70px;
          background-color: #FFFFFF;
          .name{
            color: #333;
            font-size: 18px;
          }
          .desc{
            color: #999;
            font-size: 16px;
            margin-top: 15px;
          }
        }
      }
      .product-into-imgs{
        width: 320px;
        margin-left: 48px;
        .product-img{
          m
          img{
            width: 320px;
            height: 260px;
          }
        }
        .product-views{
          padding: 15px 0;
          height: 70px;
          background-color: #FFFFFF;
          .name{
            color: #333;
            font-size: 18px;
          }
          .desc{
            color: #999;
            font-size: 16px;
            margin-top: 15px;
          }
        }
      }
    }
    .product-title{
      color: #333;
      font-size: 44px;
      margin: 20px 0;
    }
    .product-desc{
      color: #999999;
      font-size: 22px;
    }
    .line{
      width: 80px;
      height: 10px;
      background-color: #4171B3;
      margin: 30px auto;
    }
  }
}
</style>