JSFiddle - React, Tailwind, and code Playground

by chong zi

HTML

<!-- view -->
<template>
  <set-title title="标题"></set-title>
  <div class="case">
    <div class="t">
      <h1>成功案例</h1>
    </div>
    <div class="panel">
      <ul>
        <li v-for="(key,item) in anlis" :class="{on:item.en === currentEn}">
          <strong @click="currnetEn = item.en)">{{item.name}}</strong>
          <div>
            <span v-for="sub in item.list"><a>{{sub.name}}</a></span>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  module.exports = {
      showMenu: true,
      data: function() {
        return {
          currentEn: '',
          anlis: []
        }
      },
      route: {
        data: function(transition) {
          this.anlis = window.wsData.anli;
        }
      }

</script>

CSS

.case ul li {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  height: 200px;
  box-sizing: border-box;
  position: relative;
}

.case ul li.on strong + div {
  display: block;
}

JavaScript

var wxData = {
	anli:[
				    {
				        "en":"fangchan",
				        "name":"房产",
				        "list":[
				            {"index":0,"dir":9,"name":"影像馆"},
				            {"index":1,"dir":8,"name":"置业直通车"},
				            {"index":2,"dir":7,"name":"保利地产"},
				            {"index":3,"dir":6,"name":"万科广场"},
				            {"index":4,"dir":5,"name":"武汉有氧青年"},
				            {"index":5,"dir":4,"name":"通州万达广场"},
				            {"index":6,"dir":3,"name":"凯里中心城"},
				            {"index":7,"dir":2,"name":"海派新天地"},
				            {"index":8,"dir":1,"name":"九华学府"}
				        ]
				    },
				    {
				        "en":"jiaoyu",
				        "name":"教育",
				        "list":[
				            {"index":0,"dir":9,"name":"锦阳南山中学双语学校"},
				            {"index":1,"dir":8,"name":"北京第166中学"},
				            {"index":2,"dir":7,"name":"棠湖中学"},
				            {"index":3,"dir":6,"name":"DulwichBeijing"},
				            {"index":4,"dir":5,"name":"英语庄园"},
				            {"index":5,"dir":4,"name":"远播国际教育"},
				            {"index":6,"dir":3,"name":"东方瑞通"},
				            {"index":7,"dir":2,"name":"文圣蒲香"},
				            {"index":9,"dir":1,"name":"卡酷七色光方庄分部"}
				        ]
				    },
				    {
				        "en":"lvyou",
				        "name":"旅游",
				        "list":[
				            {"index":0,"dir":9,"name":"乐途旅游网"},
				            {"index":1,"dir":8,"name":"狼牙山旅游"},
				            {"index":2,"dir":7,"name":"途牛国内旅游"},
				            {"index":3,"dir":6,"name":"同程旅游"},
				            {"index":4,"dir":5,"name":"永乐票务"},
				            {"index":5,"dir":4,"name":"签证宝"},
				            {"index":6,"dir":3,"name":"中国国旅"},
				            {"index":7,"dir":2,"name":"万国通"},
				            {"index":8,"dir":1,"name":"吾爱社区"}
				        ]
				    },
				    {
				        "en":"meirong",
				        "name":"美容",
				        "list":[
				            {"index":0,"dir":9,"name":"四季康美"},
				            {"index":1,"dir":8,"name":"CMM郑明明"},
				           ...