service.vue 8.18 KB
<style>
.service-ultab1:after{
	content: "";
    clear: both;
    width: 100%;
    display: block;
}
.service-ultab1 li{float:left;min-height: 287px;}
.service-ultab1 div .padleft{margin-left:20px;}
</style>

<template>
<!-- <div class="close-left-menu">	
	<a v-link="{path:'/serviceList/1'}">link</a>
</div> -->
<div>

  <div class="service-box1">

    <div class="pop-banner clearfix w1003">
      <div class="operate-btns">
       
      </div>
      <h3 class="current-module">服务中心</h3>
    </div> 

  </div>

  <div class="service-content">
      <img src="/images/s928help.gif" style="margin:0px auto;display:block;">
      <ul class="service-ullist1">
          <li :class="{'current':tabindex==0}" 
          v-on:click="tabindex=0">
            <a href="javascript:">
                <div class="div_1">
                  <img src="/images/ser-9-7_03.png">
                </div>
                <h3>客服</h3>
                <p>Customer service</p>
                <span><b></b></span>
            </a>
          </li>
          <li :class="{'current':tabindex==1}" 
           v-on:click="tabindex=1">
            <a href="javascript:">
                <div class="div_2">
                  <img src="/images/ser-9-7_05.png">
                </div>
                <h3>说明</h3>
                <p>Instructions</p>
                <span><b></b></span>
            </a>
          </li>
          <li :class="{'current':tabindex==2}" 
           v-on:click="tabindex=2">
            <a href="javascript:">
                <div class="div_3">
                  <img src="/images/ser-9-7_07.png">
                </div>
                <h3>协议</h3>
                <p>Agreement</p>
                <span><b></b></span>
            </a>
          </li>
      </ul>
      <div class="service-tab1">
          <div class="service-tab1-con1" v-show="tabindex==0">
              <ul class="service-ultab1">
                <li>
                  <img src="/images/ser-9-7_13.png" class="img_1">
                  <p style="padding-left:103px;">
                        客服电话:400-056-1858<br>&nbsp;&nbsp;QQ客服:2933108227 传世欣欣
                  </p>
                </li>
                <li>
                  <img src="/images/ser-9-7_16.png" class="img_1">
                  <p style="padding-left:45px;">
                        邮箱:kf@csbr.cn<br>地址:北京市庄胜广场西翼一四一零
                  </p>
                </li>
                <li>
                  <img src="/images/ser-9-7_19.png" class="img_1">
                  <p style="padding-left:90px;">
                        周一至周五<br>上午九时至下午十八时
                  </p>
                </li>
              </ul>
          </div>
          <div class="service-tab1-con2" v-show="tabindex==1">
              <ul class="service-ultab1">
                <li>
                    <img src="/images/ser-9-7c.png" class="img_2">
                    <span>操作</span>
                    <div>
                        <a class="padleft" 
                        v-link="{path:'/serviceDetail/'+item.guid }"
                        v-for="item in lista">
                        {{item.title}}</a>
                        <a v-link="{path:'serviceList/IN/info/0'}" 
                        class="link1">更多内容</a>
                    </div>
                </li>
                <li>
                  <img src="/images/ser-9-7c2_03-02.png" class="img_2">
                    <span>运营</span>
                    <div>
                        <a class="padleft" 
                        v-link="{path:'/serviceDetail/'+item.guid }"
                        v-for="item in listb">
                        {{item.title}}</a>
                        <a v-link="{path:'serviceList/IN/info/1'}" 
                        class="link1">更多内容</a>
                    </div>
                </li>
                <li>
                  <img src="/images/ser-9-7c2_03-03.png" class="img_2">
                    <span>金融</span>
                    <div>
                        <a class="padleft" 
                        v-link="{path:'/serviceDetail/'+item.guid }"
                        v-for="item in listc">
                        {{item.title}}</a>
                        <a v-link="{path:'serviceList/IN/info/2'}" 
                        class="link1">更多内容</a>
                    </div>
                </li>
              </ul>
          </div>
          <div class="service-tab1-con3" v-show="tabindex==2">
              <ul class="service-ultab1">
  <!--               <li>
                    <img src="/images/ser-9-7b3_03-02.png" class="img_2">
                    <span>操作</span>
                    <div>
                        <a class="padleft" 
                        v-link="{path:'/serviceDetail2/'+item.guid }"
                        v-for="item in listd">
                        {{item.title}}</a>
                        <a  v-link="{path:'serviceList/AG/info/0'}" 
                         class="link1">更多内容</a>
                    </div>
                </li> -->
                <li style='width:50%;'>
                  <img src="/images/ser-9-7b3_03-03.png" class="img_2">
                    <span>运营</span>
                    <div>
                        <a class="padleft" 
                        v-link="{path:'/serviceDetail2/'+item.guid }"
                        v-for="item in liste">
                        {{item.title}}</a>
                        <a  v-link="{path:'serviceList/AG/info/1'}" 
                         class="link1">更多内容</a>
                    </div>
                </li>
                <li style='width:50%;'>
                  <img src="/images/ser-9-7b3_03.png" class="img_2">
                    <span>金融</span>
                    <div>
                        <a class="padleft" 
                        v-link="{path:'/serviceDetail2/'+item.guid }"
                        v-for="item in listf">
                        {{item.title}}</a>
                        <a  v-link="{path:'serviceList/AG/info/2'}" 
                         class="link1">更多内容</a>
                    </div>
                </li>
              </ul>
          </div>
      </div>
  </div>

</div>
</template>

<script>
module.exports={
	data:function(){
		return {
			tabindex:1,
			lista:[],listb:[],listc:[],
			listd:[],liste:[],listf:[]
		}
	},methods:{
		getData:function(){
			// Ajax.post('/platform/sys_helper_getList',{
   //      page:1,pageSize:6,hptype:'IN',contenttype:'0'
   //    }).then(function(res){
			// 	var result=res.data;
			// 	if(result.data && result.data.list){
			// 		this.$set('lista',result.data.list);					
			// 	}
			// }.bind(this))
			Ajax.post('/platform/sys_helper_getList',{
        page:1,pageSize:6,hptype:'IN',contenttype:'1'
      }).then(function(res){
        var result=res.data;

        if(result.data &&  result.data.list){
          this.$set('listb',result.data.list);          
        }
      }.bind(this))
			Ajax.post('/platform/sys_helper_getList',{
        page:1,pageSize:6,hptype:'IN',contenttype:'2'
      }).then(function(res){
        var result=res.data;

        if(result.data  && result.data.list){
          this.$set('listc',result.data.list);          
        }
      }.bind(this))

			// Ajax.post('/platform/sys_helper_getList',{
   //      page:1,pageSize:6,hptype:'AG',contenttype:'0'
   //    }).then(function(res){
   //      var result=res.data;
   //      if(result.data  && result.data.list){
   //        this.$set('listd',result.data.list);          
   //      }
   //    }.bind(this))
			Ajax.post('/platform/sys_helper_getList',{
        page:1,pageSize:6,hptype:'AG',contenttype:'1'
      }).then(function(res){
        var result=res.data;

        if(result.data  && result.data.list){
          this.$set('liste',result.data.list);          
        }
      }.bind(this))
			Ajax.post('/platform/sys_helper_getList',{
        page:1,pageSize:6,hptype:'AG',contenttype:'2'
      }).then(function(res){
        var result=res.data;

        if(result.data  && result.data.list){
          this.$set('listf',result.data.list);          
        }
      }.bind(this))

		}
	},route:{
		activate:function(){
			this.getData();
		}
	}
}
</script>