<!DOCTYPE html>
<html lang="zh-CN" ng-app="App" ng-controller="Ctrl">
<head> <meta name="keywords" content="keywords_temp" />
<meta name="description" content="description_temp" />

  <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" />



<link rel="stylesheet" href="./static/src/views/global/element/index.css" />










  <link rel="stylesheet" href="./static/src/views/index/index.css?v=4444">
  <link rel="stylesheet" href="./static/src/views/global/publicCss/index.css" />
  
  
  <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">

<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">
      
      <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>

      
      <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>

        
        <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>


   
   <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>
             </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">
                 
                 <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>
         
         <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="padding-bottom: 0;background: white;">
         <div class="main_box" style="width:100%">
           <div class="same_title">服务品牌</div>
           <div class="fubiaoti">在乎你 所以C位</div>
           <div class="text-center" style="flex-wrap: wrap;margin-top: 50px;position: relative">
             <img draggable="false" src="./static/src/views/index/img/fuwu_brand.png" alt="" style="width: 100%;height: 100%;" />
             <div class="gengduo">
               <div class="pinpai_btn zhao_btn text-center" @click="goPinPai">了解更多</div>
             </div>
             
           </div>
         </div>
       </div>

        
        <div class="buycar" style="padding-bottom: 0;background: white;">
          <div class="main_box" style="width:100%">
            <div class="same_title">招商加盟</div>
            <div class="fubiaoti">共创商机，共享成功</div>
            <div class="text-center" style="flex-wrap: wrap;margin-top: 50px;position: relative">
              <img draggable="false" src="http://thumbq.com/Cg/Upload/image/202508/zsjm_bg_new.png" alt="" style="width: 100%;height: 100%;" />
              <div class="gengduo">
                <div class="pinpai_btn zhao_btn text-center" @click="lookMore('tojoin')">了解更多</div>
              </div>
            </div>
          </div>
        </div>

       
       <div class="buycar" 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 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">
                   
                   
                   
                   
                 </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>
                  
              </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">
       
       <div class="mb_module_container" style="background: white;">
         <div class='you_zhi'>
           <div class="same_title_box">
             <div class="same_title">服务品牌</div>
             <div class="fubiaoti">在乎你 所以C位</div>
           </div>
           <div class="mb_zsjm_btn_box">
             <div class="mb_zsjm_btn" @click="goPinPai">
               <span>了解更多</span>
             </div>
           </div>
           <el-image src="./static/src/views/index/img/fuwu_one.png" fit="cover" style="width: 100%;height: 100%;display: block;" />

           
         </div>
       </div>
   </div>

   <div class="mb_module_container">
       
       <div class="mb_module_container">
         <div class='you_zhi'>
           <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>
           <el-image src="./static/src/views/index/img/mb_zhaoshang.png" fit="cover" class="zhaoshang_image" />

           
         </div>
       </div>
   </div>

   
   <div class="mb_module_container" v-if="brandList.length>0">
     <div class="mb_news_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="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>

   
    

    
    <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>
        <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>
        
        
        

        
      </div>

    </div>
  </div>

</div>
<link rel="stylesheet" href="/static/src/views/global/publicCss/footer.css?v=212111">

<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">
            
            
          </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">
            
            <br>
            
          </div>
        </div>
      </div>
    </div>
  </div>
</div>





<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>

   
   <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>
</div>




</body>
</html>
