<template>
  <div class="container" style="background: #fff;">
    <menu-modal></menu-modal>
    <div class="main-container">
      <div class="wrap" style="background:#fff">
          
        <div style="margin: 20px 0;padding: 0">
          <nuxt-link to="/" style="color:#000">首页></nuxt-link>
          <span>网站地图</span>
        </div>
        <div class="webMap">
          <div style="font-weight:600">关于欣新</div>
              <div class="margin-Top">
                <div style="font-weight:600">产品展示</div>
                 <ul class="v-ul clearfix">
                <li style="margin-right:20px">
                  <nuxt-link to="/vehicle" style="color:#666">房车租赁</nuxt-link>
                </li>
                <li
                  v-for="item in vehicleType"
                  :key="item.id"
                  style="width:70px;margin-right:10px"
                >{{item.name}}</li>
              </ul>
              <ul class="v-ul clearfix">
                <li style="margin-right:20px">
                  <nuxt-link to="/tour" style="color:#666">房车旅行</nuxt-link>
                </li>
                <li v-for="item in tourType" :key="item.id"  style="width:70px;margin-right:10px">{{item.name}}</li>
              </ul>
              <ul class="v-ul clearfix">
                <li style="margin-right:20px">
                  <nuxt-link to="/campsite" style="color:#666">房车营地</nuxt-link>
                </li>
                <li
                  v-for="item in campsiteType"
                  :key="item.id"
                   style="width:70px;margin-right:10px"
                >{{item.name}}</li>
              </ul>
              </div>
              <div class="margin-Top">
              <div style="font-weight:600">招商加盟</div>
            </div>
            <div class="margin-Top">
              <ul class="v-ul clearfix">
                <li style="font-weight:600">新闻资讯</li>
                <li style="margin-left:20px">
                  <nuxt-link to="/activity" style="color:#666">欣新活动</nuxt-link>
                </li>
                <li style="margin-left:20px">
                  <nuxt-link to="/news" style="color:#666">新闻动态</nuxt-link>
                </li>
              </ul>
              </div>
              <div class="margin-Top">
                <div style="font-weight:600">联系我们</div>
              </div>
        </div>
      </div>
    </div>
    <footer-modal></footer-modal>
  </div>
</template>

<script>
import axios from "../plugins/axios";
import menuModal from "../components/menu";
import footerModal from "../components/footer";
import GoTop from "../components/goTop";
export default {
  data() {
    return {
      tourType: [],
      campsiteType: [],
      vehicleType:[]
    };
  },
  components: {
    GoTop,
    menuModal,
    footerModal
  },
  created() {
    this.getType();
  },
  methods: {
    async getType() {
      const tour = await axios.get("/api/uccn/app/unauth/tour/tagList");
      this.tourType = tour.data.data;
      const campsite = await axios.get(
        "/api/campsite/campsiteTag/app/unauth/tags"
      );
      this.campsiteType = campsite.data.data;
      const child = await axios.get(
        "/vehicle/cata/app/unauth/types"
      );
      this.vehicleType = child.data.data;
      console.log(this.childType);
    }
  }
};
</script>

<style scoped>
.clearfix:after {
  /*伪元素是行内元素 正常浏览器清除浮动方法*/
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  *zoom: 1; /*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
.webMap {
  background-color: #fff;
  padding: 20px;
  font-size: 14px;
  width: 1120px;
  margin: 0 auto 30px auto;
}

.v-ul {
  margin: 0;
  padding: 0;
  margin-top: 30px;
  list-style: none;
}
.v-ul li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
}
.margin-Top{
  margin-top:70px
}
</style>
