<!DOCTYPE html>
<html lang="zh-CN" ng-app="App" ng-controller="Ctrl">
<head>
  <title>东风风神品牌官方网站</title>
  <meta charset="UTF-8" />
<meta name="renderer" content="webkit" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
/>
<link rel="icon" href="./static/src/img/logo_title.png" type="image/x-icon" />
<link rel="stylesheet" href="./static/src/style/common.css" />
<link rel="stylesheet" href="/static/src/views/global/publicCss/main.css" />
<script src="./static/src/views/global/js/md5.min.js"></script>
<script src="./static/src/script/pkg.js"></script>
<script src="./static/src/views/global/js/vue.js"></script>
<link rel="stylesheet" href="./static/src/views/global/element/index.css" />
<script src="./static/src/views/global/element/index.js"></script>
<script src="./static/src/views/global/js/axios.min.js"></script>
<script src="./static/src/views/global/js/resize.js"></script>
<script src="./static/src/views/global/js/commonUrl.js"></script>
<script src="./static/src/views/global/js/request.js"></script>
<script src="./static/src/views/global/js/common.js"></script>
<script src="./static/src/views/global/js/vconsole.min.js"></script>

<script>
  if (!IsPC()) {
    if (SYS_CODE == 1) {
      window.vConsole = new window.VConsole();
    }
  }
  if (SYS_CODE == 1) {
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?ff8923a382e8e41a2e6919dde67d3dda";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  } else {
    var _hmt = _hmt || [];
    (function () {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?2a48a9e2e51ef011765872b27fbde805";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  }

  function isPc() {
    return window.innerWidth > 750
  }

  function generateAnonymousUserId() {
    const timestamp = Date.now().toString(36);
    const random = Math.random().toString(36).substring(2, 8);
    return `${timestamp}-${random}`;
  }

  function getAnonymousUserId() {
    // 尝试从 Local Storage 中获取用户标识符
    let userId = localStorage.getItem("user_id");
    if (!userId) {
      // 如果 Local Storage 中没有用户标识符，生成一个新的并存储
      userId = generateAnonymousUserId();
      localStorage.setItem("user_id", userId);
    }
    return userId;
  }

  window.onload = function () {
    const userId = getAnonymousUserId();
    console.log("匿名用户标识:", userId);
  };

  // 获取签名方法-线索标签埋点用
  function getPointSign(appKey, params) {
    const CONFIG = {
      clueAppKey: APP_KEY, // 替换为实际的 appKey
      clueSecret: APP_SECRET, // 替换为实际的 appSecret
    };
    const appSecrets = {
      [CONFIG.clueAppKey]: CONFIG.clueSecret,
    };

    if (!appSecrets[appKey]) {
      return JSON.stringify({ error: "Invalid appKey" });
    }

    // 获取对应的 appSecret
    const appSecret = appSecrets[appKey];

    // 按字典顺序排序参数
    const sortedKeys = Object.keys(params).sort();
    let baseString = "";

    sortedKeys.forEach((key) => {
      baseString += `${key}=${params[key]}&`;
    });

    // 去除最后的 & 符号，并拼接 appSecret
    baseString = baseString.slice(0, -1) + appSecret;

    // 生成签名（md5 的 md5 值）
    return md5(md5(baseString));
  }

  function isToday(date) {
  const today = new Date();
  return (
    date.getDate() === today.getDate() &&
    date.getMonth() === today.getMonth() &&
    date.getFullYear() === today.getFullYear()
  );
}


function formatDate(date) {
  var year = date.getFullYear();
  var month = date.getMonth() + 1; // 月份加1
  var day = date.getDate();
  return year + '/' + month + '/' + day;
}


  function checkCodeValid() {
    // 尝试从网页链接中获取标签值
    let tag_code = localStorage.getItem("tag_code")?JSON.parse(localStorage.getItem("tag_code")):{};
    console.warn('checkCodeValid 标签是否当天有效 ====', tag_code, tag_code && tag_code.saveDate && !isToday(new Date(tag_code.saveDate)))
    if(tag_code && tag_code.saveDate && !isToday(new Date(tag_code.saveDate))) {
      localStorage.setItem('tag_code', JSON.stringify({}))
    }

    if(getQueryVariable("c_")) {
      localStorage.setItem('tag_code', JSON.stringify({
        value: getQueryVariable("c_"),
        saveDate: formatDate(new Date())
      }))

      return getQueryVariable("c_")
    }
    else {
      console.log('(localStorage.getItem("tag_code") || {}).value', localStorage.getItem("tag_code")?JSON.parse(localStorage.getItem("tag_code")).value:'')
      return localStorage.getItem("tag_code")?JSON.parse(localStorage.getItem("tag_code")).value:''
    }
  }

  // 设置页面埋点
  function setPagePoint(payload) {
    let param = {
      appKey: APP_KEY,
      user_unique: localStorage.getItem("user_id") || getAnonymousUserId(),  // vue加载可能比window.load快
      page_type: payload.page_type,
      timestamp: parseInt(new Date().getTime()/1000),
      tag_code: checkCodeValid() || "",
      model_id: getQueryVariable("model_id") || ''
    };

    let sign = getPointSign(APP_KEY, param)
    return postJson("/Ajax/Clue.php?method=setPoint", { ...param, sign });
  }

</script>

  <link rel="stylesheet" href="./static/src/views/index/index.css?v=343434">
  <link rel="stylesheet" href="./static/src/views/global/publicCss/index.css" />
  <!-- <script src="./static/src/views/global/js/vant.min.js"></script> -->
  <script src="./static/src/views/global/vant/vant.min.js"></script>
  <link rel="stylesheet" href="./static/src/views/global/vant/index.css" />
</head>
<body>
<div class="index">
   <link rel="stylesheet" href="/static/src/views/global/publicCss/head.css?v=121212">
<!-- pc端 -->
<div id='app'>
  <div class="hidden-xs">
    <div :class="['index_container',isTop?'index_fixed':'']">
      <div class="index_box_1200">
        <div class='text-start' style="width: 100%;">
          <div class="index_logo_left text-start">
            <a href="/" target="_self">
              <el-image class="img" :src="`${isTop?'./static/src/views/index/img/logo_left_red.png':'./static/src/views/index/img/logo_left.png'}`" fit="cover"></el-image>
            </a>
          </div>
          <div class="text-end" style="flex: 1;margin-right: -30px;">
            <div class="nav_head text-center silde" v-for="(item,index) in car_fast_list" :key="index+'99'" @click="enterFast(item)">
              <div :class="['text-nav',isTop?'text_active_nav':'','text-start']">
                <div v-if="!isTop" style="position: relative;">
                  <img id="one" src="./static/src/views/index/img/car_index_icon.png" alt="" style="width: 28px;height: 28px;" />
                  <img id="two" src="./static/src/views/index/img/bianse.png" alt="" style="width: 28px;height: 28px;" />
                </div>
                <div v-if="isTop">
                  <img src="./static/src/views/index/img/bianse.png" alt="" style="width: 28px;height: 28px;" />
                </div>
                <div style="margin-left: 10px;">{{item.car_name}}</div>
                <div :class="['bottom_line','menu2-item',isTop?'bottom_line_active':'']"></div>
              </div>
            </div>
            <div class="nav_head text-center car_img_list" style="position: relative;">
              <div :class="['text-nav',isTop?'text_active_nav':'']" v-if="carList.length>0">车型总览</div>
              <div :class="['arrow_pop','car_total_animate',isTop?'arrow_pop_active':'']"></div>
              <div class="car_total car_total_animate">
                <div class="car_model">
                  <div class="car_box" v-for="(item,index) in carList" :key="index" @click="handleTabCar(index)">
                    <div :class="currentIndex == index?'active':''">
                      {{item.category_name}}
                      <div class="line_car" v-if="currentIndex == index"></div>
                    </div>
                  </div>
                </div>
                <div class="car_model_box" >
                  <div class="box" id="box_index_car"  @click="handleCar(index)" :class="carCurrentIndex == index?'active_car':''"   :style="{transform:`translateX(${rightNum}px)`}" v-for="(item,index) in carModelList" :key="index">
                    {{item.car_name}}
                  </div>
                </div>
                <div class="car_img" @click="lookDetail()">
                  <div :class="[carModelList.length>8?'car_btn':'car_btn_none']" style="left: 0;" @click.stop="changeBannerImg('minus')">
                    <i class="el-icon-arrow-left"></i>
                  </div>
                  <div :class="[carModelList.length>8?'car_btn':'car_btn_none']" style="right: 0;" @click.stop="changeBannerImg('add')">
                    <i class="el-icon-arrow-right"></i>
                  </div>
                  <el-image draggable="false" v-if=" carModalImage && carModalImage.pic_path" style="width: 100%;height:100%" :src="carModalImage.pic_path?imageUrl+ carModalImage.pic_path:''" fit="cover"></el-image>
                </div>
                <div class="car_price">
                  {{carModalImage && carModalImage.price}}
                  <span style="margin-left: -2px;">{{carModalImage && carModalImage.price_unit}}</span>
                </div>
              </div>
            </div>
            <div class="nav_head text-center silde" v-for="(item,index) in headerTabList" :key="index">
              <div :class="['text-nav',isTop?'text_active_nav':'']" @click="handleOneRankLinkUrl(item)">
                {{ item.module_name }}
                <div :class="['bottom_line','menu2-item',isTop?'bottom_line_active':'']"></div>
              </div>
              <div :class="['nav_silde','menu2-item',isTop?'nav_silde_active':'']" v-if="item.module_list">
                <div class="nav_content text-center" v-for="(v,k) in  item.module_list" :key="k" @click="handleLinkUrl(v)">
                  <a :style="{'color':isTop?'#000':'#FFFFFF'}">{{v.column_name}}</a>
                </div>
              </div>
            </div>
            <div class="nav_head text-center" v-if="isShowOrder">
              <div class='text-nav'>
                <div :class="['yuyue','text-center',isTop?'yuyue_active':'']" @click="goToTestDrive">预约试驾</div>
              </div>
            </div>
          </div>
          <div class="index_logo_left text-end" style="cursor: auto;">
              <el-image class="img" :src="`${isTop?'./static/src/views/index/img/logo_right_red.png':'./static/src/views/index/img/logo_right.png'}`" fit="cover" style="width: 150.72px;height: 32px;"></el-image>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <!-- 移动端 -->
  <div class="visible-xs-block">
   <!-- 移动 -->
   <div :class="['index_container',isTop?'index_fixed':'']">
    <div class="index_box">
      <!-- logo -->
      <div class="index_logo">
        <a href="/" target="_self">
          <el-image class="img" :src="`${isTop?'./static/src/views/index/img/logo_left_red.png':'./static/src/views/index/img/logo_left.png'}`" fit="cover"></el-image>
        </a>
      </div>

      <!-- nav按钮 -->
      <div class="index_nav_btn" >
        <button class="btn" @click="open_navPopups">
          <el-image v-if="!isTop" class="btn_img" src="./static/src/views/index/img/mobile_nav.png" fit="cover"></el-image>
          <el-image v-else class="btn_img" src="./static/src/views/index/img/mb_nav_b.png" fit="cover"></el-image>
        </button>

        <!-- nav弹窗 -->
        <div class="mb_popups" ref="nav_popups">

          <div class="model_list_box">
            <el-collapse v-model="activeNames" accordion @change="web_collapse_change">
              <el-collapse-item title="车型总览" :name="0" class="web_sticky_collapse_item"  v-if="carList.length>0">
                <div class="mb_car_class" v-for="(item, index) in carList" :key="index">
                    <div class="category_name">{{item.category_name}}</div>
                    <div class="mb_car_list" v-for="(a,b) in item.car_model_list" :key="b"  @click="mb_lookDetail(a)">
                      <div class="car_name">{{ a.car_name }}</div>
                      <el-image v-if="a.pic_path" class="car_pic" :src="imageUrl+ a.pic_path" fit="cover"></el-image>
                    </div>
                </div>
              </el-collapse-item>
              <el-collapse-item  v-for="(item,index) in headerTabList" :key="index"  :title="item.module_name" :name="index+1" class="web_sticky_collapse_item">
                <div class="nav_content text-center" v-for="(v,k) in  item.module_list" :key="k" @click="handleLinkUrl(v)">
                  <a>{{v.column_name}}</a>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>

          <div class="mb_popups_bottom">
            <div class="yuyue_button" @click="goToTestDrive">
              <span >预约试驾</span>
              <img src="./static/src/views/index/img/mb_arrow_r.png">
            </div>

            <div class="mb_close_box" @click="close_navPopups">
              <img src="./static/src/views/index/img/mb_close.png">
            </div>
          </div>
        </div>
      </div>
    </div>
   </div>
  </div>
</div>

<script>
  var app = new Vue({
    el:'#app',
    data:function(){
      return {
        hasDefalutNavList:['/introduction.html','/brand_present.html'], //存在页面 不需要滚动特效 导航就默认显示
        headerTabList:[],//头部导航栏
        carList:[],//车系列表
        carModelList:[],//车型列表
        carModalImage:'',//车型图片
        currentIndex:0,
        carCurrentIndex:0,
        isTop:false,//是否置顶
        imageUrl:SYS_IMAGE_URL,
        car_fast_list:[],//车型快捷入口
        model_id:'',
        isShowOrder:true,
        activeNames: ['1'],
        rightNum: 0
      }
    },
    created:function(){
      if(this.hasDefalutNavList.indexOf(location.pathname)!=-1){
          console.log('存在')
          this.isTop = true
          $('.index_container').addClass('active_top_index')
      }else{
        console.log('不存在')
        this.getScrollTop()
      }
      // 获取顶部导航栏配置
      this.getTopNavList()
      // 查询车型总览数据
      this.getAllCarTotalInfo()
      // 获取快捷入口
      this.getFastEnter()

      if(renderNullString(getQueryVariable('model_id')) !=''){
        this.model_id = getQueryVariable('model_id')
        this.getCarDetailInfo(this.model_id)
      }

    },
    methods:{
      // 切换车系
      handleTabCar:function(index){
        this.currentIndex = index
        this.carCurrentIndex = 0
        this.carModelList = this.carList[this.currentIndex].car_model_list
        this.carModalImage = this.carModelList[0]
      },
      //切换车型
      handleCar:function(index){

        console.log(this.carCurrentIndex , index,'this.carCurrentIndex > index========')
        let arrNum = this.carModelList.length-1
        if( this.carCurrentIndex < index){
          if(index > 7){
            this.rightNum =  -(150*(index-7))
          }
        }else{
          if(index > 7){
            this.rightNum =  -(150*(index-7))
          }else{
            this.rightNum = 0
          }
          // this.rightNum =  150
        }
        console.log(this.rightNum,'rightNum========')
        this.carCurrentIndex = index
        this.carModalImage = this.carModelList[this.carCurrentIndex]
      },
      // 箭头切换车型
      changeBannerImg:function(type){
        let num = this.carCurrentIndex
        console.log(type,this.carModelList.length-1,'type==============')
          if(type == 'add'){
            if(num == this.carModelList.length-1){
              return
            }else{
             num = num + 1
            }
            this.handleCar(num)
            console.log(num,'num==============')
          }else{
            if(num == 0){
              return
            }else{
              num = num - 1
            }
            this.handleCar(num)
            console.log(num,'num==============')
          }
      },
      lookDetail:function(){
        if(renderNullString(this.carModalImage.link_url) !="") {
          if(this.carModalImage.is_open_new_wd == '1'){
            window.open(this.carModalImage.link_url)
          } else {
            window.location.href=this.carModalImage.link_url
          }
        }
      },
      mb_lookDetail:function(item){
        console.log(item);
        if(renderNullString(item.link_url) !='') {
          if (item.is_open_new_wd == '1') {
            window.open(item.link_url)
          } else {
            window.location.href=item.link_url
          }
        }
      },
      enterFast:function(item){
        if (renderNullString(item.link_url) !='') {
          if (item.is_open_new_wd == '1') {
            window.open(item.link_url)
          } else {
            window.location.href=item.link_url
          }
        }
      },
      //顶部导航栏一级做跳转
      handleOneRankLinkUrl:function(item){

        if(IsPC()){
          if (renderNullString(item.link_url) ==''){
            return false
          }
        } else {
          if (renderNullString(item.wap_link_url) =='' && renderNullString(item.link_url) ==''){
            return false
          }
        }
        if (item.is_open_new_wd == '1') {
          window.open(IsPC()?item.link_url:(item.wap_link_url?item.wap_link_url:item.link_url))
        } else {
          window.location.href=IsPC()?item.link_url:(item.wap_link_url?item.wap_link_url:item.link_url)
        }
      },
      // 顶部导航栏二级做跳转
      handleLinkUrl:function(item){
        if(IsPC()){
          if (renderNullString(item.link_url) ==''){
            return false
          }
        } else {
          if (renderNullString(item.wap_link_url) =='' && renderNullString(item.link_url) ==''){
            return false
          }
        }
        if (item.is_open_new_wd == '1') {
          window.open(IsPC()?item.link_url:(item.wap_link_url?item.wap_link_url:item.link_url))
        } else {
          window.location.href=IsPC()?item.link_url:(item.wap_link_url?item.wap_link_url:item.link_url)
        }
      },
      // 顶部导航栏是否置顶
      getScrollTop:function(){
        console.log('哈哈')
        let that = this
        $(window).scroll(function(){
          let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
          if(scrollTop>= 600) {
            that.isTop = true
            $('.index_container').addClass('active_top_index')
          }else{
            that.isTop = false
            $('.index_container').removeClass('active_top_index')
          }
        })
      },
      // 查询顶部导航栏
      getTopNavList:function(){
        let that = this
        let param = {
          cge_lg_id:1,
          method:'dep_GetNavList'
        }
        get('/Ajax/AjaxNewly.php',param).then(res=>{
          if(res.IsSuccess == '1') {
            if(renderNullString(res.header) !='') {
              if(!IsPC()){
                for(let i=0;i<res.header.length;i++){
                  if(renderNullString(res.header[i].module_list)!='' && (renderNullString(res.header[i].link_url)!='' || renderNullString(res.header[i].wap_link_url)!='')){
                    let obj = JSON.parse(JSON.stringify(res.header[i]))
                    delete obj.module_list
                    obj.column_name = obj.module_name
                    res.header[i].module_list.unshift(obj)
                  }
                }
                that.headerTabList = res.header
              } else {
                that.headerTabList = res.header
              }
            }
          }
        })
      },
      // 查询车型总览数据
      getAllCarTotalInfo:function(){
        let param = {
          cge_lg_id:1,
          method:'dep_GetShowInNavCategory'
        }
        get('/Ajax/AjaxNewly.php',param).then(res=>{
          if(res.IsSuccess == '1') {
            if(renderNullString(res.data) !='') {
              this.carList = res.data
              this.carModelList = res.data[0].car_model_list || []
              this.carModalImage = this.carModelList ? this.carModelList[0] : ''
            }
          }
        })
      },
      // 获取快捷入口
      getFastEnter:function(){
        let that = this
        let param = {
          cge_lg_id:1,
          method:'dep_GetShowInTop'
        }
        get('/Ajax/AjaxNewly.php',param).then(res=>{
          if(res.IsSuccess == '1') {
            if(renderNullString(res.data) !='') {
              that.car_fast_list = res.data
            }
          }
        })
      },
      goToTestDrive:function(){
        window.open('test_driver.html?model_id='+this.model_id)
      },
      // 获取车型详情
      getCarDetailInfo:function(id){
        let that = this
        let param = {
          cge_lg_id:1,
          method:'dep_GetCarModelDtl',
          model_id:id
        }
        get('/Ajax/AjaxNewly.php',param).then(function(res){
          if(res.IsSuccess == '1' && renderNullString(res.data) !='') {
            if(res.data.is_show_in_itf == '1'){
              that.isShowOrder = true
            } else {
              that.isShowOrder = false
            }
          }
        })
      },
      open_navPopups:function(){
        $('.mb_popups').addClass('index_popups_active')
      },
      // 关闭nav弹窗
      close_navPopups:function(){
        $('.mb_popups').removeClass('index_popups_active')
      },
      web_collapse_change: function(activeNames) {
        console.log(activeNames)
        let that = this
        if(renderNullString(activeNames.toString())!='' && activeNames!='0' && renderNullString(that.headerTabList[activeNames-1].module_list)==''){
          if (renderNullString(that.headerTabList[activeNames-1].wap_link_url) =='' && renderNullString(that.headerTabList[activeNames-1].link_url) ==''){
            return false
          }
          if (that.headerTabList[activeNames-1].is_open_new_wd == '1') {
            window.open(that.headerTabList[activeNames-1].wap_link_url?that.headerTabList[activeNames-1].wap_link_url:that.headerTabList[activeNames-1].link_url)
          } else {
            window.location.href=that.headerTabList[activeNames-1].wap_link_url?that.headerTabList[activeNames-1].wap_link_url:that.headerTabList[activeNames-1].link_url
          }
        }
      },
    }
  })
</script>


   <!-- pc端 -->
   <div id="banner">
   <div class="hidden-xs" id = 'hidden_index'>
     <!-- 轮播图 -->
       <div class="banner_index" v-if="bannerList.length>0">
         <el-carousel @change="changeBanner" :autoplay="false" :interval="5000" style="width: 100%;position: relative;overflow: hidden;" height="1080px">
           <el-carousel-item v-for="(item,index) in bannerList" :key="index">
             <!-- 图片 -->
              <el-image
                v-if="!item.video_path"
                style="width: 100%;height:100%"
                :src="item.pic_path_p?imageUrl+item.pic_path_p:''"
                class="imgs"
                draggable="false"
                @click.stop="lookBannerDetail(item,1)"
                fit="cover">
              </el-image>
              <!-- 视频 -->
              <video
                v-else
                :height="windowHeight"
                :id="'myVideo'+ item.kv_id"
                :src="item.video_path?imageUrl+item.video_path:''"
                @click="handlePlay(item)"
                class="imgs"
                :poster="item.video_cover_pic_p?imageUrl+item.video_cover_pic_p:'./static/src/views/index/img/shipi_poster.png'"
                style="object-fit: cover;width: 100%;height: 100%;display: block;">
              </video>
              <div class="banner_title">
                <span v-if="item.copywriting_color==2">
                  <img
                    src="./static/src/views/index/img/white_jiao.png"
                    fit="cover"
                    v-if="item.main_copywriting && item.assistant_copywriting">
                </span>
                <span v-else>
                  <img
                    src="./static/src/views/index/img/banner_title_icon.png"
                    fit="cover"
                    v-if="item.main_copywriting && item.assistant_copywriting">
                </span>
                <div class="title" :style="{'color':item.copywriting_color==2?'#FFF':'#000'}">{{item.main_copywriting}}</div>
                <div class="title" :style="{'color':item.copywriting_color==2?'#FFF':'#000'}">{{item.assistant_copywriting}}</div>
                <!-- 按钮 -->
                <div class="text-start btn_list" :class="item.reservation_drive_isshow == '1' && item.is_show_detail =='1'?'':'active_btn_list'">
                  <div v-if="item.is_show_detail == '1'" class="liaojie btn text-center" @click.stop="lookBannerDetail(item,1)">了解详情</div>
                  <div v-if="item.reservation_drive_isshow == '1'" @click.stop="orderCarDriver(item,1)" class="order_btn btn text-center">预约试驾</div>
                </div>
              </div>
              <!-- 播放按钮 -->
              <div class="play_btn_pos" v-if="is_show_play && item.video_path">
                <img src="./static/src/views/carlist/img/play_btn.png" @click="handlePlay(item)" alt="" />
              </div>

           </el-carousel-item>
         </el-carousel>
       </div>

       <!-- 车型推荐 -->

       <div class="car_recommend" v-if="carRecommedList.length>0">
         <div class="recommed_box">
           <div ref="car_change"  style="width:800px;height: 60px;margin: 0 auto;margin-top: 50px;margin-bottom: 30px;overflow: hidden;">
               <div  class="swipe_box" >
                 <div class="swipe_item" v-for="it in carRecommedList1" :key="it.model_id" >
                   <div class="recommend_car_title" @click="handleTabChange(it)">
                     {{it.car_name}}
                   </div>
               </div>
                <div class="swipe_item" v-for="(item,index) in carRecommedList2" :key="index" >
                 <div class="recommend_car_title" :class="index==0?'active_recommend':''" @click="handleTabChange(item)">
                   {{item.car_name}}
                 </div>
             </div>
               </div>
           </div>
           <div class="recommend_content_img">
             <!-- 左边按钮 -->
             <div class="left_prev" @click="handlePrev">
               <div class="text-start">
                 <img src="./static/src/views/index/img/arrow_left.png" alt=""/>
                 <!-- <div class="pre_next_text">
                   <span v-if="(currentRecommend-1)>=0">{{carRecommedList && carRecommedList[currentRecommend-1].car_name}}</span>
                   <span v-else>{{carRecommedList && carRecommedList[(carRecommedList.length-1)].car_name}}</span>
                 </div> -->
               </div>
             </div>
             <div>
              <el-carousel
              :initial-index="currentRecommend"
              :autoplay="false"
              style="width: 868px;position: relative;margin:0 auto"
              height="688px"
              indicator-position="none"
              arrow="never"
              ref="toggle"
              @change="changeTab">
                <el-carousel-item v-for="(item,index) in carRecommedList" :key="index">
                    <el-image draggable="false" style="width: 868px;height:488px" :src="item.pic_path?imageUrl+item.pic_path:''" fit="contain"></el-image>
                </el-carousel-item>
              </el-carousel>
              <div class="recommend_box_one">
                <div class="title_one">{{carRecommedList[curInx].main_copywriting}}</div>
                <div class="car_price" style="margin-top: 15px;">
                  {{carRecommedList[curInx].price}}
                  <span style="margin-left: -5px;">{{carRecommedList[curInx] && carRecommedList[curInx].price_unit}}</span>
                </div>
                <div class="text-center liao">
                  <div class="liaojie btn text-center" @click="lookBannerDetail(carRecommedList[curInx],2)">了解更多</div>
                  <div v-if="carRecommedList[curInx].is_show_in_itf == '1'" class="order_btn btn text-center" @click="orderCarDriver(carRecommedList[curInx],2)">预约试驾</div>
                </div>
              </div>
             </div>
            
             <!-- 右边按钮 -->
             <div class="right_prev" @click="handleNext">
               <div class="text-start">
                 <!-- <div class="pre_next_text">
                   <span v-if="currentRecommend<(carRecommedList.length-1)">{{carRecommedList && carRecommedList[currentRecommend+1].car_name}}</span>
                   <span v-else>{{carRecommedList && carRecommedList[0].car_name}}</span>
                 </div> -->
                 <img src="./static/src/views/index/img/arrow_right.png" alt=""/>
               </div>
             </div>
           </div>
         </div>
       </div>


       <!-- 购车支持 -->
       <div style="width: 100%;position: relative;">
        <div style="text-align: center;margin-bottom: 30px;">
          <div class="same_title" style="padding-top: 0;">购车支持</div>
          <div class="fubiaoti"> 实现梦想，驾驭自由</div>
        </div>
         <!-- <img src="./static/src/views/index/img/gouchezhichi_bg.png" alt="" style="width: 100%;height: 100%;" /> -->
         <div style="position: relative;width: '100%';height: 926px; overflow: hidden;">
            <div class="trapezoid left_img_box" @click="orderCarDriver({},1)">
              <img draggable="false" src="./static/src/views/index/img/rectangle.png" alt="" class="left_img" style="width: 100%;height: 100%;" />
            </div>
            <div class="trapezoid right_img_box" @click="lookAgentSearch()">
              <img draggable="false" src="./static/src/views/index/img/maskgroup.png" alt="" class="left_img" style="width: 100%;height: 100%;" />
            </div>
         </div>
         <div class="y" @click="orderCarDriver({},1)">预约试驾</div>
         <div class="jinxiaoshang" @click="lookAgentSearch()">经销商查询</div>
       </div>

       <!-- 品牌资讯 -->
       <div class="buycar" style="background: white;" v-if="brandList.length>0">
         <div class="main_box">
           <div class="same_title">品牌资讯</div>
           <div class="fubiaoti">洞悉风神，掌握最新动态</div>
           <div class="pinpai_box">
             <div class="pin_pai_car" @click="lookBrandInfo(item)" v-for="(item,index) in brandList" :key="index" v-if="index<=2">
               <div class="buy_car_img">
                <img
                draggable="false"
                :src="item.pic_path?imageUrl+item.pic_path:''"
                style="width: 100%;height: 100%;object-fit: cover;"
                />
               </div>
               <div class="buy_car_service_one">
                 {{item.title}}
               </div>
               <div class="buy_car_service_two pinpai">
                 {{item.create_time}}
               </div>
             </div>
           </div>
           <!-- 了解更多 -->
           <div style="width: 100%" class="text-center">
             <div class="pinpai_btn text-center" @click="lookMore('zixun')">了解更多</div>
           </div>
         </div>
       </div>

       <!-- 优质服务 -->
       <div class="buycar" style="padding-bottom: 30px;">
        <div class="main_box">
          <div class="same_title">优质服务</div>
          <div class="fubiaoti">关怀至上，满足您的期待</div>
          <div class="text-center" style="flex-wrap: wrap;margin-top: 120px;">
            <div class="buy_list" @click="goPinPai">
              <div class="buy_car_img">
                <img src="./static/src/views/index/img/fuwu_one.png" alt="" style="width: 100%;height: 100%;" />
              </div>
              <div class="buy_car_service_one">
                服务品牌
              </div>
              <div class="buy_car_service_two">
                诚心诚意敢承诺，互助共创趣生活
              </div>
            </div>
            <div class="buy_list" @click="goGongShi">
              <div class="buy_car_img">
                <img src="./static/src/views/index/img/gongshi.jpg" alt="" style="width: 100%;height: 100%;" />
              </div>
              <div class="buy_car_service_one">
                服务公示
              </div>
              <div class="buy_car_service_two">
                质保政策，备件保障
              </div>
            </div>
          </div>
        </div>
      </div>

       <!-- 招商加盟 -->
       <div style="width: 100%;position: relative;">
         <img draggable="false" src="./static/src/views/index/img/zsjm_bg.png" alt="" style="width: 100%;height: 100%;" />
         <div class="zhaoshang">
           <div class="text-center" style="flex-direction: column;width: 100%;">
             <div class="same_title" style="padding-top: 0;color: white;">招商加盟</div>
             <div class="zhao_fu text-hidden">
               共创商机，共享成功
             </div>
             <div class="pinpai_btn zhao_btn text-center" @click="lookMore('tojoin')">了解更多</div>
           </div>
         </div>
       </div>

       <!-- 更多精彩 -->
       <div class="buycar more" style="background-color: white;">
         <div class="main_box">
           <div class="more_box">
             <div class="more_img">
               <img class="app" src="./static/src/views/index/img/app_icon.jpg" alt="" style="width: 100%;height: 100%;" />
               <img class="wechat" src="./static/src/views/index/img/wechat_icon.jpg" alt="" style="width: 100%;height: 100%;display: none;" />
             </div>
             <div style="flex: 1;">
               <div class="more_title">
                 <div class="same_title" style="padding-top: 0;">更多精彩</div>
                 <div class="fubiaoti text-hidden">
                   探索风神世界，呈现更多精彩
                 </div>
                 <div class="text-start" style="margin-top: 60px;">
                   <div id='app_one' class="box_icon text-center" style="flex-direction: column;">
                     <img class="one_box" src="./static/src/views/index/img/phone_app_icon.png?v=1234" alt=""  />
                     <img class="two_box" src="./static/src/views/index/img/phone_app_icon.png?v=1234" alt="" style="display: none;opacity: 0.5;"  />
                     <div class="one_text">官方APP</div>
                     <div class="two_text" style="color: #D3D3D4;display: none;">官方APP</div>
                   </div>
                   <div class="box_icon text-center" id="w_box" style="flex-direction: column;">
                     <img class="one_box" src="./static/src/views/index/img/wechat_icon_hui.png?v=1234" alt=""  />
                     <img class="two_box" src="./static/src/views/index/img/w_icon_hei.png?v=1234" alt="" style="display: none;"  />
                     <div class="one_text" style="color: #D3D3D4;">官方小程序</div>
                     <div class="two_text" style="display: none;">官方小程序</div>
                   </div>
                 </div>
                 <div class="text-start">
                   <a href="https://weibo.com/u/1739840253" style="color: #50555B;">
                     <div class="box_icon text-center" style="flex-direction: column;">
                       <img src="./static/src/views/index/img/weibo_icon.png?v=1234" alt=""  />
                       <div>官方微博</div>
                     </div>
                   </a>
                   <a href="https://www.xiaohongshu.com/user/profile/60357af40000000001004e3e" style="color: #50555B;">
                     <div class="box_icon text-center" style="flex-direction: column;">
                       <img src="./static/src/views/index/img/redBook_icon.png?v=1234" alt=""  />
                       <div>官方小红书</div>
                     </div>
                   </a>
                   <a href="https://v.douyin.com/iY59ggXF/" style="color: #50555B;">
                     <div class="box_icon text-center" style="flex-direction: column;">
                       <img src="./static/src/views/index/img/douyin_icon.png?v=1234" alt=""  />
                       <div>官方抖音</div>
                     </div>
                   </a>
                   <a href="https://www.kuaishou.com/profile/3xfyi4c3s4mdzdq" style="color: #50555B;">
                     <div class="box_icon text-center" style="flex-direction: column;">
                       <img src="./static/src/views/index/img/kuaishou_icon.png?v=1234" alt=""  />
                       <div>官方快手</div>
                     </div>
                   </a>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
   </div>

   <!-- 移动端 -->
   <div class="visible-xs-block">
    <!-- 顶部展示 -->
    <div class="mobile_top" v-if="bannerList.length>0">

      <van-swipe class="my-swipe" indicator-color="white" @change="web_carouselChange">
        <van-swipe-item v-for="(item,index) in bannerList" :key="index">
          <el-image
                class="web_banner_image"
                v-if="!item.video_path"
                style="width: 100%; height: 100%;"
                :src="imageUrl+item.pic_path_m"  fit="cover"
                @click="web_lookBannerDetail(item)"
          ></el-image>
          <video
                v-else
                x5-playsinline="true"
                playsinline="true"
                webkit-playsinline="true"
                x-webkit-airplay="true"
                x5-video-orientation="portraint"
                :id="'web_myVideo'+ item.kv_id"
                @click="handlePlay_h5(item)"
                class="mb_vedio"
                :poster="item.video_cover_pic_m?imageUrl+item.video_cover_pic_m:'./static/src/views/index/img/vedio_jz.png'"
                style="height: 100%;width: 100%;object-fit: cover;">
                <source :src="item.video_path?imageUrl+item.video_path:''"></source>
          </video>
          <div class="mb_top_title_box">
            <div class="mb_title_icon" v-if="item.main_copywriting && item.assistant_copywriting">
              <img v-if="item.copywriting_color==2" src="./static/src/views/index/img/mb_banner_icon.png" alt="">
              <img v-else src="./static/src/views/index/img/banner_title_icon.png" alt="">
            </div>
            <p class="mb_top_title" :style="{'color':item.copywriting_color==2?'#FFF':'#000'}">
              {{item.main_copywriting}}
              <br>
              {{item.assistant_copywriting}}
            </p>
          </div>

          <!-- 播放按钮 -->
          <div class="play_btn_pos" v-if="is_show_play && item.video_path" @click="handlePlay_h5(item)">
            <img src="./static/src/views/carlist/img/play_btn.png" alt="" />
          </div>

          <div class="mb_top_btn_list_box">
            <div class="mb_top_btn_list_inner">
              <div class="learn_more" v-if="item.is_show_detail == '1'" @click="web_lookBannerDetail(item)">
                <span>了解更多</span>
                <el-image class="img" src="./static/src/views/index/img/mb_arrow_right_w.png" alt="" fit="cover">
              </div>
              <span class="test_drive"  v-if="item.reservation_drive_isshow == '1'" >
                <span @click="orderCarDriver(item,1)">预约试驾</span>
                <el-image class="img" src="./static/src/views/index/img/mb_arrow_right_b.png" alt="" fit="cover">
              </span>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>


    </div>
      <div v-if="currentPlayUrl" class="full_video_box">
        <img @click="currentPlayUrl=''" class="full_video_back" src="./static/src/views/index/img/video_back_h5.png" alt="">
        <video id="myVideo" x5-playsinline="true" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true"
          x5-video-orientation="portraint" id='web_myVideo1' class="mb_vedio" ref="videoElement" style="width:100vw;">
          <source :src="imageUrl+currentPlayUrl">
          </source>
        </video>
      </div>

      <!-- 车型推荐 -->

      <div class="car_recommend" v-if="carRecommedList.length>0">
        <div class="recommed_box">
          <div class="recommend_box_inner">
            <el-carousel class="recommend_car_title_carousel" ref="car_changeApp" type="card" :autoplay="false" indicator-position="none" arrow="never" @change="handleTabChangeApp">
                <el-carousel-item class="recommend_car_title_carousel_item" v-for="(item,index) in carRecommedList" :key="index">
                  <div class="recommend_car_title" :class="currentRecommendApp==index?'active_recommend':''" >
                    {{item.car_name}}
                  </div>
                </el-carousel-item>
              </el-carousel>
          </div>
          <div class="recommend_content_img">
            <!-- 左边按钮 -->
            <div class="left_prev" @click="handlePrevApp">
              <div class="text-start">
                <img src="./static/src/views/index/img/arrow_left.png" alt=""/>
              </div>
            </div>
            <el-carousel
            :initial-index="currentRecommendApp"
            :autoplay="false"
            class="recommend_carousel"
            indicator-position="none"
            arrow="never"
            ref="toggleApp"
            @change="changeTabApp">
              <el-carousel-item v-for="(item,index) in carRecommedList" :key="index">
                  <div class="recommend_image">
                    <el-image class="recommend_image_img" :src="imageUrl+ item.pic_path" fit="cover"></el-image>
                  </div>

                  <div class="recommend_box_one">
                    <div class="title_one">{{item.main_copywriting}}</div>
                    <div class="car_price">
                      {{item.price}}
                      <span class="unit">{{item && item.price_unit}}</span>
                    </div>
                  </div>
                  <!-- <div class="liao">
                    <div class="liaojie btn text-center" @click="web_lookBannerDetail(item)">
                      <span>了解更多</span>
                      <el-image src="./static/src/views/index/img/mb_arrow_right_b.png" fit="cover" class="mb_icon">
                    </div>
                    <div v-if="item.is_show_in_itf == '1'" class="order_btn btn text-center" @click="orderCarDriver(item,2)">
                      <span>预约试驾</span>
                      <el-image src="./static/src/views/index/img/mb_arrow_right_w.png" fit="cover" class="mb_icon">
                    </div>
                  </div> -->
              </el-carousel-item>
            </el-carousel>

            <div class="liao">
              <div class="liaojie btn text-center" @click="web_lookBannerDetail(carRecommedList[currentRecommendApp])">
                <span>了解更多</span>
                <el-image src="./static/src/views/index/img/mb_arrow_right_b.png" fit="cover" class="mb_icon">
              </div>
              <div  v-if="carRecommedList[currentRecommendApp].is_show_in_itf == '1'" class="order_btn btn text-center" @click="orderCarDriver(carRecommedList[currentRecommendApp],2)">
                <span>预约试驾</span>
                <el-image src="./static/src/views/index/img/mb_arrow_right_w.png" fit="cover" class="mb_icon">
              </div>
            </div>
            <!-- 右边按钮 -->
            <div class="right_prev" @click="handleNextApp">
              <div class="text-start">
                <img src="./static/src/views/index/img/arrow_right.png" alt=""/>
              </div>
            </div>
          </div>
        </div>



     </div>

     <!-- 购车支持 -->
      <div class="mb_module_container">
        <div class="mb_buycar_box">
          <div class="same_title_box">
            <div class="same_title">购车支持</div>
            <div class="fubiaoti">实现梦想，驾驭自由</div>
          </div>
          <div class="main_box">
            <div class="buy_list" @click="orderCarDriver({},1)">
              <div class="buy_car_img">
                <el-image src="./static/src/views/index/img/yuyueshijia_bg.jpg" fit="cover" style="width: 100%;height: 100%;" />
              </div>
              <div class="buy_car_title">预约试驾</div>
            </div>
            <div class="buy_list" @click="lookAgentSearch()">
              <div class="buy_car_img">
                <el-image src="./static/src/views/index/img/jingxiaoshang.jpg" fit="cover" style="width: 100%;height: 100%;" />
              </div>
              <div class="buy_car_title">经销商查询</div>
            </div>
          </div>
        </div>
      </div>

          
    <div class="mb_module_container" v-if="brandList.length>0">
      <!-- 品牌资讯 -->
      <div class="mb_news_box" style="background: white;">
        <div class="same_title_box">
          <div class="same_title">品牌资讯</div>
          <div class="fubiaoti">洞悉风神，掌握最新动态</div>
        </div>
        <div class="main_box">
          <div class="buy_list" @click="lookBrandInfo(item)" v-for="(item,index) in brandList" :key="index" v-if="index<=1">
            <div class="buy_car_img">
              <el-image :src="item.pic_path?imageUrl+item.pic_path:''" fit="cover" style="width: 100%;height: 100%;" />
            </div>
            <div class="buy_car_title">{{item.title}}</div>
            <div class="web_time_sub">{{item.create_time}}</div>
          </div>
        </div>
        <div class="liaojie btn text-center lookMore" @click="lookMore('zixun')">
          <span>了解更多</span>
          <el-image src="./static/src/views/index/img/mb_arrow_right_b.png" fit="cover" class="mb_icon">
         </div>
      </div>
      <!-- 优质服务 -->
      <div class="mb_module_container">
        <div class="mb_serve_box">
          <div class="same_title_box">
            <div class="same_title">优质服务</div>
            <div class="fubiaoti">关怀至上，满足您的期待</div>
          </div>
          <div class="main_box">
            <div class="buy_list" >
              <div class="buy_car_img"  @click="goPinPai">
                <el-image src="./static/src/views/index/img/fuwu_one.png" fit="cover" style="width: 100%;height: 100%;" />
              </div>
              <div class="buy_car_title">服务品牌</div>
            </div>
            <div class="buy_list" @click="goGongShi">
              <div class="buy_car_img">
                <el-image src="./static/src/views/index/img/gongshi.jpg" fit="cover" style="width: 100%;height: 100%;" />
              </div>
              <div class="buy_car_title">服务公示</div>
            </div>
          </div>
        </div>
      </div>
   </div>

   <!-- 招商加盟 -->
    <div class="mb_zsjm_container">
      <el-image class="mb_zsjm_bg" fit="cover" src="./static/src/views/index/img/mb_zhaoshang.png">

      </el-image>
        <div class="same_title_box">
          <div class="same_title">招商加盟</div>
          <div class="fubiaoti">共创商机，共享成功</div>
        </div>

        <div class="mb_zsjm_btn_box">
          <div class="mb_zsjm_btn" @click="web_lookMore">
            <span>了解更多</span>
          </div>
        </div>
    </div>

    <!-- 更多精彩 -->
    <div class="mb_more_container" style="background-color: #ffffff;">
      <div class="same_title_box">
        <div class="same_title">更多精彩</div>
        <div class="fubiaoti">探索风神世界，呈现更多精彩</div>
      </div>

      <div class="mb_rq_box">
        <img class="app" style="width: 100%;" src="./static/src/views/index/img/mb_QR2.jpg"></img>
        <img class="wechat" style="width: 100%;display: none;" src="./static/src/views/index/img/mb_QR1.jpg"></img>
      </div>

      <div class="mb_icon_box">
        <div id='web_app' class="box_icon text-center box_icon_active" style="flex-direction: column;">
          <img class="one_box" src="./static/src/views/index/img/phone_app_icon.png?v=1234" alt="" style="opacity: 0.5;" />
          <img class="two_box" src="./static/src/views/index/img/phone_app_icon.png?v=1234" alt="" style="display: none;"  />
          <div class="one_text">官方APP</div>
          <!-- <div class="two_text" >官方APP</div> -->
        </div>
        <div id="web_program" class="box_icon text-center" style="flex-direction: column;">
          <img class="one_box" src="./static/src/views/index/img/wechat_icon_hui.png?v=1234" alt="" />
          <img class="two_box"  src="./static/src/views/index/img/w_icon_hei.png?v=1234" alt="" style="display: none;" />
          <div class="one_text" >官方小程序</div>
          <!-- <div class="two_text" >官方小程序</div> -->

        </div>
        <a class="box_icon" href="https://v.douyin.com/iY59ggXF/" style="color: #50555B;">
          <img src="./static/src/views/index/img/douyin_icon.png?v=1234" alt=""  />
          <div>官方抖音</div>
        </a>
        <a class="box_icon" href="https://weibo.com/u/1739840253" style="color: #50555B;">
          <img src="./static/src/views/index/img/weibo_icon.png?v=1234" alt=""  />
          <div>官方微博</div>
        </a>
        <a class="box_icon" href="https://www.xiaohongshu.com/user/profile/60357af40000000001004e3e" style="color: #50555B;">
            <img src="./static/src/views/index/img/redBook_icon.png?v=1234" alt=""  />
            <div>官方小红书</div>
        </a>

        <a class="box_icon" href="https://www.kuaishou.com/profile/3xfyi4c3s4mdzdq" style="color: #50555B;">
            <img src="./static/src/views/index/img/kuaishou_icon.png?v=1234" alt=""  />
            <div>官方快手</div>
        </a>
      </div>

    </div>
  </div>

</div>
<link rel="stylesheet" href="/static/src/views/global/publicCss/footer.css?v=212111">
<!-- pc端 -->
<div id="footer">
  <div class="hidden-xs">
    <div class="footer_bg">
      <div class="main_box_footer">
        <div class="footer_content">
          <div style="width: 100%" class="rich_box">
            <div class="box_text" v-for="(item,index) in footerList" :key="index" @click="handleGoToFoot(item)">
              <a>
                {{item.column_name}}
              </a>
            </div>
        
          </div>
          <div class="line_bottom"></div>
          <div class="tel_link">
            <span>服务热线</span>
            <a href="tel:400-880-6600" title target="_blank">400-880-6600</a>
            <a href="tel:800-880-6600" title target="_blank">800-880-6600</a>
          </div>
          <div class="tel_link text_rich">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011402000311" title target="_blank">鄂公网安备 42011402000311号</a>
            <a href="https://beian.miit.gov.cn/" title target="_blank">鄂ICP备11014707号-1 东风乘用车公司版权所有</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="visible-xs-block">
    <div class="footer_bg">
      <div class="main_box_footer">
        <div class="footer_content">
          <div class="rich_box">
            <div class="box_text" v-for="(item,index) in footerList" :key="index" @click="handleGoToFoot(item)">
              <a>
                {{item.column_name}}
              </a>
            </div>
           
          </div>
          <div class="line_bottom"></div>
          <div class="tel_link">
            <span>服务热线</span>
            <a href="tel:400-880-6600" title target="_blank">400-880-6600</a>
            <a href="tel:800-880-6600" title target="_blank">800-880-6600</a>
          </div>
          <div class="tel_link text_rich">
            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=42011402000311" title target="_blank">鄂公网安备 42011402000311号</a>
            <br>
            <a href="https://beian.miit.gov.cn/" title target="_blank">鄂ICP备11014707号-1 东风乘用车公司版权所有</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>


<script>
  var myFooter = new Vue({
    el:'#footer',
    data:function(){
      return {
        footerList:[]
      }
    },
    created:function(){
      this.getFooterList()
    },
    methods:{ 
      //点击底部导航栏跳转
      handleGoToFoot:function(item){
        if (renderNullString(item.link_url) !='') {
          if (item.is_open_new_wd == '1') {
            window.open(item.link_url)
          } else {
            window.location.href=item.link_url
          }
        } else {
          this.$message.warning('敬请期待')
        }
      },
      getFooterList:function(){
        let that = this
        let param = {
          cge_lg_id:1,
          method:'dep_GetNavList_foot'
        }
        get('/Ajax/AjaxNewly.php',param).then(function(res){
          if(res.IsSuccess == '1') {
            if(renderNullString(res.foot) !='') {
              that.footerList = res.foot
            }
          }
        })
      }
    }
  })
</script>

<script src="./static/src/script/common.js?052601"></script>
<link rel="stylesheet" href="/static/src/views/global/publicCss/slide.css?v=34434111" />

<div  id="slide">
  <div class="hidden-xs">
    <div class="slide_nav">
      <div class="wechat_icon_silde" style="cursor: pointer;">
        <div class="text-center" id="service_customer">
          <img src="./static/src/img/service_icon.png" alt="" style="width: 32px;height: 32px">
        </div>
      </div>
      <div class="middle_line"></div>
      <div class="wechat_icon_silde">
        <div id="img_one" class="text-center" style="z-index: 99;cursor: pointer;">
          <img id="one_text" src="./static/src/img/nav_wechat_hui.png" alt="" style="width: 32px;height: 32px">
        </div>
        <div class="wechat_box text-center">
          <img src="./static/src/views/test_driver/img/order_success_erweima.png" alt="" style="width: 80px;height: 80px;">
        </div>
      </div>
      <div class="middle_line"></div>
      <div class="wechat_icon_silde">
        <div id="img_two" class="text-center" style="width: 100%;z-index: 99;cursor: pointer;">
          <img id="two_text" src="./static/src/img/nav_phone_hui.png" alt="" style="width: 32px;height: 32px">
        </div>
        <div class="phone_box text-center">
          <div style="min-width: 140px;opacity: 0;" class="kefu">客服热线：400 880 6600</div>
        </div>
      </div>
      <div class="middle_line"></div>
      <div class="wechat_icon_silde" style="cursor: pointer;padding-top: 10px;padding-bottom: 5px;">
        <div class="text-center" id="backTop">
          <img id="three_text" src="./static/src/img/zhidings_hui.png" alt="" style="width: 32px;height: 32px">
        </div>
      </div>
    </div>


    <!-- 客服系统弹窗 -->
    <div class="service_box_customer">
      <div class="box_customer">
        <div class="header_title_customer">
          在线客服
          <img id="close_customer" src="https://app-lcbqiniu.dfpv.com.cn/closeAskBtn.png" alt="" />
        </div>
        <div class="customer_content"></div>
      </div>
    </div>

   </div>

   <!-- 移动端 -->
   <div class="visible-xs-block">
    <div class="slide_nav web_slide_nav">
      <div class="wechat_icon_silde" style="cursor: pointer;">
        <div class="text-center" id="service_customer_app">
          <img src="./static/src/img/service_icon.png" alt="" class="service_image">
        </div>
      </div>
      <div class="middle_line"></div>
      <div class="wechat_icon_silde">
        <div id="web_img_one" class="text-center" style="z-index: 99;cursor: pointer;">
          <img id="web_one_text" src="./static/src/img/nav_wechat_hui.png" alt="" class="wechat_img">
        </div>
        <div class="wechat_box text-center">
          <img src="./static/src/views/test_driver/img/order_success_erweima.png" alt="" class="wechat_RQ_img">
        </div>
      </div>
      <div class="middle_line"></div>
      <div class="wechat_icon_silde">
        <div id="web_img_two" class="text-center" style="width: 100%;z-index: 99;cursor: pointer;">
          <img id="web_two_text" src="./static/src/img/nav_phone_hui.png" alt="" class="phone_img">
        </div>
        <div class="phone_box text-center">
          <div style="min-width: 140px;opacity: 0;" class="kefu">客服热线：400-880-6600</div>
        </div>
      </div>
      <div class="middle_line"></div>
      <div class="wechat_icon_silde" style="cursor: pointer;">
        <div class="text-center" id="web_backTop">
          <img id="web_three_text" src="./static/src/img/web_zhiding_liang.png" alt="" class="goTop_img">
        </div>
      </div>
    </div>
   </div>
   <!-- <div class="middle_line"></div>
   <div class="wechat_icon_silde" style="cursor: pointer;padding-top: 10px;padding-bottom: 5px;">
     <div class="text-center" id="backTop">
       <img id="three_text" src="./static/src/img/zhidings_hui.png" alt="" style="width: 32px;height: 32px">
     </div>
   </div> -->
 </div>
</div>

<script>
var img_one = document.getElementById('img_one')
img_one.addEventListener('mouseenter',function(){
  $('#one_text').attr('src','./static/src/img/nav_wechat_liang.png')
})
img_one.addEventListener('mouseleave',function(){
  $('#one_text').attr('src','./static/src/img/nav_wechat_hui.png')
})

var serviceUrl=""

// 移动端
let one_status = false
let tow_status = false
var web_img_one = document.getElementById('web_img_one')
function close_one() {
    $('#web_one_text').attr('src','./static/src/img/nav_wechat_hui.png')
    $('.wechat_box').removeClass('wchat_box_active')
    one_status = false
}
web_img_one.addEventListener('click',function(){
  if(!one_status) {
    $('#web_one_text').attr('src','./static/src/img/nav_wechat_liang.png')
    $('.wechat_box').addClass('wchat_box_active')
    one_status = true
    if(tow_status) {close_tow()}
  }
  else {
    close_one()
  }
})
// web_img_one.addEventListener('mouseleave',function(){
//   $('#web_one_text').attr('src','./static/src/img/nav_wechat_hui.png')
// })

var img_two = document.getElementById('img_two')
img_two.addEventListener('mouseenter',function(){
  $('#two_text').attr('src','./static/src/img/nav_phone_liang.png')
  $('.kefu').css('opacity',1)
})
img_two.addEventListener('mouseleave',function(){
  $('#two_text').attr('src','./static/src/img/nav_phone_hui.png')
  $('.kefu').css('opacity',0)
})

// 移动端
function close_tow() {
    $('#web_two_text').attr('src','./static/src/img/nav_phone_hui.png')
    $('.kefu').css('opacity',0)
    $('.phone_box').removeClass('phone_box_active')
    tow_status = false
}
var web_img_two = document.getElementById('web_img_two')
// console.log(web_img_two);
web_img_two.addEventListener('click',function(){
  if(!tow_status) {
    $('#web_two_text').attr('src','./static/src/img/nav_phone_liang.png')
    $('.kefu').css('opacity',1)
    $('.phone_box').addClass('phone_box_active')
    tow_status = true
    if(one_status) {close_one()}
  }else {
    close_tow()
  }
})
// web_img_two.addEventListener('mouseleave',function(){
//   $('#web_two_text').attr('src','./static/src/img/nav_phone_hui.png')
//   $('.kefu').css('opacity',0)
// })

var img_three = document.getElementById('backTop')
img_three.addEventListener('mouseenter',function(){
  $('#three_text').attr('src','./static/src/img/zhidings_liang.png')
})
img_three.addEventListener('mouseleave',function(){
  $('#three_text').attr('src','./static/src/img/zhidings_hui.png')
})

// 回到顶部
$("#backTop").click(function(){
  window.scrollTo({
      top: 0,
      behavior: 'smooth' // 确保'smooth'选项可用
  });
})

// 移动端回到顶部
var web_img_three = document.getElementById('web_backTop')
web_img_three.addEventListener('click',function(){
  $('#web_three_text').attr('src','./static/src/img/zhidings_liang.png')
  setTimeout(()=>{
    $('#web_three_text').attr('src','./static/src/img/web_zhiding_liang.png')
  },1000)
})
// web_img_three.addEventListener('mouseleave',function(){
//   $('#web_three_text').attr('src','./static/src/img/zhiding_liang.png')
// })

// 回到顶部
$("#web_backTop").click(function(){
  window.scrollTo({
      top: 0,
      behavior: 'smooth' // 确保'smooth'选项可用
  });
})


function web_getScrollTop (){
  $(window).scroll(function(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    if(scrollTop>= 600) {
      // that.isTop = true
      $('.web_slide_nav').addClass('web_show_slider')
    }else{
      // that.isTop = false
      $('.web_slide_nav').removeClass('web_show_slider')
      if(one_status) {close_one()}
      if(tow_status) {close_tow()}
    }
    if(one_status) {close_one()}
    if(tow_status) {close_tow()}
  })
}

function web_getScrollAgentTop (){
  $(window).scroll(function(){
    let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    if(scrollTop>= 200) {
      // that.isTop = true
      $('.web_slide_nav').addClass('web_show_slider')
    }else{
      // that.isTop = false
      $('.web_slide_nav').removeClass('web_show_slider')
      if(one_status) {close_one()}
      if(tow_status) {close_tow()}
    }
    if(one_status) {close_one()}
    if(tow_status) {close_tow()}
  })
}


if(window.location.href.indexOf('dealer_query.html')>-1){
  web_getScrollAgentTop()
} else {
  web_getScrollTop()
}

// 查询客服链接
function getServiceInfo(){
  let param = {
    method: "GetCustomerService",
  };
  get("/Ajax/AjaxNewly.php", param).then(function (res) {
    if (res.IsSuccess == "1" && renderNullString(res.data) != "") {
      serviceUrl = res.data.url
    }
  });
}
getServiceInfo()

// pc端
$("#service_customer").click(function(){
  // var str = `<iframe src=${serviceUrl} frameborder="0" width="100%" height="100%"></iframe>`
  // $('.customer_content').append(str)
  // $(".service_box_customer").show()
  window.open(serviceUrl)
})
$("#close_customer").click(function(){
  $(".service_box_customer").hide()
})

// app跳转
$("#service_customer_app").click(function(){
  window.location.href = serviceUrl
})
</script>

<script src="./static/src/views/index/index.js?v=454545"></script>
</body>
</html>
