pk-mall/src/components/Index/RightSliderBar.vue

<template>
  <div class="rightSlider">
    <a href="javascript:void(0)" :class="navIndexs === index?'sliderStyle':''" @click="routeTap(item.url,index,url);goToAnchor(item.id,index);navIndexs=index" class="sliders" v-for="(item,index) in rightSlider">
      <div class="img-icons">
        <img :src="item.src">
      </div>
      <div class="sliderName">{{item.name}}</div>
      <div class="slider-bottom">
        <img src="http://screen.zhousi.hdlkeji.com/aksdbn/img/line.png">
      </div>
    </a>
    <div class="wx-service">
        <div class="bg-color">
          <img src="@/assets/img/qy-wx.jpg">
        </div>
        <div class="wx-zx">微信咨询</div>
      <div class="wx-text">（手机扫码查看）</div>
    </div>
  </div>
</template>

<script setup>
import {get_config} from "@/api/menu1";
let config=ref('');

if(localStorage.getItem('config')){
  let data=JSON.parse(localStorage.getItem('config'))
  config.value=data
}else{
  get_config().then((res)=>{
    config.value=res.data
  })
}

import { provide, reactive, ref } from 'vue'
import {defineProps} from "@vue/runtime-core";
import {useRouter} from "vue-router";
import {rouseService} from "@/utils";
const anchorIndex = ref(0)
const urls=ref(null)
const rightSlider =
  [{ name: '快速报价', id: 'anchor1', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-offer-icon.png',url:'/evaluates' },
    { name: '限时特惠', id: 'anchor2', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-seckill-icon.png',url:'/seckillRank' },
    { name: '热销爆款', id: 'anchor3', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-hot-icon.png',url:'/hotSellRank' },
    { name: '产品定制', id: 'anchor4', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-custom-icon.png',url:'/product' },
    { name: '方案设计', id: 'anchor5', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-plan-icon.png' },
    { name: '云平台', id: 'anchor6', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-platform-icon.png',url:'/cloundPlatform' },
    { name: '在线咨询', id: 'anchor7', src: 'http://screen.zhousi.hdlkeji.com/aksdbn/img/index/index-kf-icon.png' }]
const goToAnchor = (selector, index) => {
  const id = '#' + selector
}
const $router=useRouter()
const routeTap=(url,index)=>{
  if(index==6){
    rouseService()
    return;
  }
  if(url){
    $router.push({path:url})
  }
}
const props = defineProps({
  navIndexs:{
    type: Number,
  },
  url:{
    type:String,
  }
})
</script>
<style lang="less" scoped>
  .rightSlider{
    position: fixed;
    top: 100px;
    right: 0;
    background-color: #fff;
    z-index: 1111;
    .wx-service{
      //width: 100px;
      //height: 119px;
      cursor: pointer;
      padding: 8px 0;
      background: #fff;
      border-radius: 12px 0px 0px 12px;
      text-align: center;
      .bg-color{
        width: 74px;
        height: 74px;
        //background-color: #9a9ca0;
        margin: 0 auto;
        img{
          width: 74px;
          height: 74px;
        }
      }
      .wx-zx{
        color: #333;
        font-size: 14px;
        margin: 5px 0;
      }
      .wx-text{
        color: #333;
        font-size: 10px;
      }
    }
    .sliderName{
      padding: 10px 0 0  0;
      font-size: 14px;
    }
    .sliderStyle{
      color: #fff!important;
      background-color: #4171B3!important;
      border-radius: 12px 0 0 12px;
    }
    .sliders{
      padding-top: 15px;
      background-color: #fff;
      display: block;
      font-size: 14px;
      text-align: center;
      color: #333;
      text-decoration: none;
      .slider-bottom{
        img{
          width: 60px;
          height: 4px;
        }
      }
    }
  }
</style>