<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" class="bread-menu">
          <nuxt-link to="/" >首页></nuxt-link>
          <span>搜索结果页</span>
        </div>

        <ul class="v-ul clearfix">
          <li v-for="menu in findList" :key="menu.id" class="v-li">
            <nuxt-link :to="menu.link" style="color:#000" :class="menu.id== 1?'active':''">{{ menu.name }} ({{menu.number}})</nuxt-link>
          </li>
        </ul>
        <div>
          <div>
            <div class="margin-Top clearfix title-find">
              <div style="float:left">房车车型</div>
              <div style="float:right;color:#999999;font-size:12px;margin-right:20px">
               <nuxt-link to="/findList/findVehicle" style="color:#999999" class="active-a">
                MORE
                <img style="width:12px" src="../../assets/images/r-9.png" />
                 </nuxt-link>
              </div>
            </div>
            <ul class="v-ul clearfix list">
              <li v-for="item in carDetail.data" :key="item.id">
                <nuxt-link :to="item.link" class="flex-aic-noc">
                  <div style="padding:13px 0 2px 28px">
                    <img style="width:152px;height:110px" :src="item.coverPic" alt="房车租赁" />
                  </div>
                  <div style="margin-left: 22px;">
                    <h2 style="font-size: 18px;font-weight:Light">{{ item.name }}</h2>
                    <div class="flex-aic-noc" style="margin:16px 0 26px 0">
                      <span
                        class="flex-aic-noc config"
                        v-for="(iitem,iindex) in item.uccnCataList"
                        :key="iitem.id"
                      >
                        <img
                          style="margin-right: 5px;"
                          v-if="iindex==0"
                          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRBRkVDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRBRkRDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlLS+CAAAADISURBVHjaYvz//z8DNQATA5UAdQ2aNWvWWyAOo8QgFigtBMRSQMMYgXQzENsC8XIgXgPENnj0vwHio2lpaf9Z0CS8gbgayrYD4o9AvIyAYxYAcSJ6GL1AYn8F4u9E+CoWI7CBTjwDpFyBuAHqvS1ALEgAiyCHEbJhe4DUHiShD8QENiMoQQIDGZQq7wPxMxIjiw+I3wItd0R20WMgPk+iQYZA7IDutfVAkyeQYgrQJwXQ2KV+FnlHRviAwHNYZDAO89xPDQAQYAC8zTagKPdHCQAAAABJRU5ErkJggg=="
                        />
                        <img
                          style="margin-right: 5px;"
                          v-if="iindex==1"
                          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNDMDRCMDJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNDMDRCMDFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmkBcLEAAADwSURBVHjaYvz//z8DNQATA5UA1QxiARGzZs36CaTYyDTjV1paGjsLlPMdxCHHFKAjPsBdhCZhCKSCgPgeEC8CWvCXaK8hGaILpJYAcQcQ2wGxGRBnAsWDgXQsFv19WA0CAn8g7ge6YjFQ81Ig+wpUfB8Q38Vi0E1cBt0BGQY0ZB7UNa+h4oJArIDFoOe4DALZ6gvEL6Cal0DFFYHYAYtBD3AZ1A7E7kD8FJrGJgBdZw306l4gey+OWMNqECgtLUXicwCxAFBxDJAuwWJOAZwFymszZ878AKLJwTC91M0iIBrofHKLga8ggnH4FiMAAQYAZvR1GACV0mMAAAAASUVORK5CYII="
                        />
                        <img
                          style="margin-right: 5px;"
                          v-if="iindex==2"
                          src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpkNmE3MjUyMi1mNmY3LWFlNGYtOTJlOS1kOTUwZjVjNDkxOTIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjNENUU3MTJDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjNENUU3MTFDRTNDMTFFOTk1MTdBMTE1MkRFRUFEMjkiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MGQ4MTBjN2ItZThlNC00ZDRiLTlkZDYtNjUzZDNhYTI4YjdjIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOmQ2YTcyNTIyLWY2ZjctYWU0Zi05MmU5LWQ5NTBmNWM0OTE5MiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhIc0EUAAAFvSURBVHjarJM9SwNBEIYv0UQUP5ImnQiW2qWzsEhjY3eF1lfk/oK/wb+QFFebIpWVTcDGLmBjI6hIMJAmKgQ1Rs5n4Y2ZO67zBh52bm/m3dnZ3UIcx14etpyeaLVabi6AU6hDFcbQhwuIwjCcpfMKtiJE9hi6UHMJ0IORvhtawH37iN1lCknkBq6gSeBrRrUVhjYcwYEVK5rtdCVyAj8med1ozfTfxXWVt6iIiSb+OezCVD3ZhyG4ynbgXf42fMADnFFV+68iNTbSdsrCVVLSgZQ1LsGK4iLleVaorsZa24At+ZvGn1tPeYnjr+o0PK3u7Nok3Rq/pHGkvITQWEfsqUfOjmEgkUP5q2zrXv9ryksI9XVPLs3KL/Asf4DAU2prDeUleuRubKB7MtWpvME3fMJXxn0KlJcQirTntkQqVPAIE9dkxqERKShupLyFkN6OrxvbgbV5AP+mqUo6ivPtm8v/reX6+v9jRS8n+xVgAORemfNTP4ZNAAAAAElFTkSuQmCC"
                        />
                        {{iitem.name}}
                      </span>
                    </div>
                    <button class="buttonDetails">
                      租车详情
                      <img style="position: absolute;" src="../../assets/images/r.png" />
                    </button>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <div>
            <div class="margin-Top clearfix title-find">
              <div style="float:left">房车旅游</div>
              <div style="float:right;color:#999999;font-size:12px;margin-right:20px">
                <nuxt-link to="/findList/findTour" style="color:#999999" class="active-a">
                MORE
                <img style="width:12px" src="../../assets/images/r-9.png" />
                 </nuxt-link>
              </div>
            </div>
            <ul class="v-ul clearfix list">
              <li v-for="item in tourDetail.data" :key="item.id">
                <nuxt-link :to="item.link" class="flex-aic-noc">
                  <img class="v-img-cover" :src="item.cover" alt="房车租赁" />
                  <div style="margin-left: 11px;position: relative">
                    <h2 style="font-size: 18px;margin-top:10px">{{item.name}}</h2>
                    <button class="buttonDetails" style="position: absolute;bottom:10px;left:0px;">
                      旅游详情
                      <img style="position: absolute;" src="../../assets/images/r.png" />
                    </button>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <div>
            <div class="margin-Top clearfix title-find">
              <div style="float:left">房车营地</div>
              <div style="float:right;color:#999999;font-size:12px;margin-right:20px">
                <nuxt-link to="/findList/findCampsite" style="color:#999999" class="active-a">
                MORE
                <img style="width:12px" src="../../assets/images/r-9.png" />
                 </nuxt-link>
              </div>
            </div>
            <ul class="v-ul clearfix list">
              <li v-for="item in campsiteDetail.data" :key="item.id">
                <nuxt-link :to="item.link" class="flex-aic-noc">
                  <img class="v-img-cover" :src="item.logo" alt="房车租赁" />
                  <div style="margin-left: 11px;position: relative">
                    <h2 style="font-size: 18px;margin-top:10px">{{item.address}}</h2>
                    <button class="buttonDetails" style="position: absolute;bottom:10px;left:0px;">
                      营地详情
                      <img style="position: absolute;" src="../../assets/images/r.png" />
                    </button>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <div>
            <div class="margin-Top clearfix title-find">
              <div style="float:left">欣新活动</div>
              <div style="float:right;color:#999999;font-size:12px;margin-right:20px">
               <nuxt-link to="/findList/findActivity" style="color:#999999" class="active-a">
                MORE
                <img style="width:12px" src="../../assets/images/r-9.png" />
                 </nuxt-link>
              </div>
            </div>
            <ul class="v-ul clearfix list list-four">
              <li v-for="item in actDetail.data" :key="item.id">
                <nuxt-link :to="item.link" class="flex-aic-noc">
                  <img class="v-img-cover" :src="item.banner" alt="房车租赁" />
                  <div style="margin-left: 11px;position: relative">
                    <h2 style="font-size: 18px;margin-top:10px">{{item.title}}</h2>
                    <h2 style="font-size: 12px;color:#666666;margin-top:23px">
                      <i class="el-icon-location"></i>
                      {{item.province}}{{item.city}}{{item.town}}{{item.address}}
                    </h2>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <div>
            <div class="margin-Top clearfix title-find">
              <div style="float:left">欣新资讯</div>
              <div style="float:right;color:#999999;font-size:12px;margin-right:20px">
               <nuxt-link to="/findList/findNew" style="color:#999999" class="active-a">
                MORE
                <img style="width:12px" src="../../assets/images/r-9.png" />
                 </nuxt-link>
              </div>
            </div>
            <ul class="v-ul clearfix list list-four">
              <li v-for="item in newDetail.data" :key="item.id">
                <nuxt-link :to="item.link" class="flex-aic-noc">
                  <img class="v-img-cover" :src="item.coverImage" alt="房车租赁" />
                  <div style="margin-left: 11px;position: relative">
                    <h2 style="font-size: 18px;margin-top:10px">{{item.title}}</h2>
                    <h2 style="font-size: 12px;color:#666666;margin-top:23px">{{item.addTime}}</h2>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </div>
          <div>
            <div class="margin-Top clearfix title-find">
              <div style="float:left">欣新子公司</div>
              <div style="float:right;color:#999999;font-size:12px;margin-right:20px">
                <nuxt-link to="/findList/findCompany" style="color:#999999" class="active-a">
                MORE
                <img style="width:12px" src="../../assets/images/r-9.png" />
                 </nuxt-link>
              </div>
            </div>
            <ul class="v-ul clearfix list list-four">
              <li v-for="item in companyDetail.data" :key="item.id">
                <nuxt-link to="/" class="flex-aic-noc">
                  <img class="v-img-cover" :src="item.cover" alt="房车租赁" />
                  <div style="margin-left: 11px;position: relative">
                    <h2 style="font-size: 18px;margin-top:10px">{{item.name}}</h2>
                    <h2 style="font-size: 12px;color:#666666;margin-top:23px">
                      <i class="el-icon-phone"></i>
                      {{item.leaderContactInfo}}
                    </h2>
                    <h2 style="font-size: 12px;color:#666666;margin-top:7px">
                      <i class="el-icon-location"></i>
                      {{item.provinceName}} {{item.cityName}} {{item.townName}} {{item.address}}
                    </h2>
                  </div>
                </nuxt-link>
              </li>
            </ul>
          </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 {
      router: "/",
      tourType: [],
      campsiteType: [],
      findList: [
        { id: 1, value: "1", name: "综合", link: "/findList/all", number: 0 },
        { id: 2, value: "2", name: "车型", link: "/findList/findVehicle", number: 0 },
        { id: 3, value: "3", name: "旅游", link: "/findList/findTour", number: 0 },
        { id: 4, value: "4", name: "营地", link: "/findList/findCampsite", number: 0 },
        { id: 5, value: "5", name: "活动", link: "/findList/findActivity", number: 0 },
        { id: 6, value: "6", name: "新闻", link: "/findList/findNew", number: 0 },
        { id: 7, value: "7", name: "子公司", link: "/findList/findCompany", number: 0 }
      ],
      allDetail: [],
      carDetail: [],
      tourDetail: [],
      campsiteDetail: [],
      actDetail: [],
      newDetail: [],
      companyDetail: [],
      listQuery: {
        type: "",
        keyword: "",
        page: "",
        limit: ""
      }
    };
  },
  components: {
    GoTop,
    menuModal,
    footerModal
  },
  created() {
    console.log(this);
    this.listQuery.keyword = this.$route.query.keywords;
    this.getAll();
  },
  methods: {
    async getAll() {
//      this.listQuery.keyword = this.$route.query.keywords;
      let {
        data: { data }
      } = await axios.get(
        `/api/uccn/app/unauth/search?type=${this.listQuery.type}&keyword=${this.listQuery.keyword}&page=${this.listQuery.page}&limit=${this.listQuery.limit}`
      );
      this.findList[1].number = data.vehicle.totalCount;
      this.findList[2].number = data.tour.totalCount;
      this.findList[3].number = data.campsite.totalCount;
      this.findList[4].number = data.activity.totalCount;
      this.findList[5].number = data.news.totalCount;
      this.findList[6].number = data.company.totalCount;
      var allNum = 0;
      for (var i = 1; i < 7; i++) {
        allNum = allNum + this.findList[i].number;
      }
      this.findList[0].number = allNum;
      // 车型
      data.vehicle.data.map(function(item) {
        item.link = encodeURI("/vehicleList/" + item.id + "?name=" + item.name);
        item.link = encodeURI(item.link);
        item.pictureList = item.picture.split(",");
        item.coverPic = item.coverPic
          ? item.coverPic
          : item.pictureList.length > 0
          ? item.pictureList[0]
          : "";
      });
      this.allDetail = data;
      this.carDetail = data.vehicle;
      // 旅游
      data.tour.data.map(function(item) {
        item.link = encodeURI("/tourDetails/" + item.id + "?name=" + item.name);
        item.link = encodeURI(item.link);
      });
      this.tourDetail = data.tour;
      //营地
      data.campsite.data.map(function(item) {
        item.link = encodeURI(
          "/campsiteDetails/" + item.id + "?name=" + item.name
        );
        item.link = encodeURI(item.link);
      });
      this.campsiteDetail = data.campsite;
      //活动
      data.activity.data.map(function(item) {
        item.link = encodeURI("/activityList/" + item.id);
        item.link = encodeURI(item.link);
      });
      this.actDetail = data.activity;
      //新闻
      data.news.data.map(function(item) {
        item.link = encodeURI("/newsList/" + item.id + "?name=" + item.title);
        item.link = encodeURI(item.link);
      });
      this.newDetail = data.news;
      //子公司
      // data.company.data.map(function(item){
      //     item.link = encodeURI('/newsList/' + item.id+'?name='+item.title);
      //     item.link = encodeURI(item.link);
      //   });
      this.companyDetail = data.company;
    }
  }
};
</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;
  list-style: none;
  margin-top: 24px;
}
.v-ul .v-li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 22px;
  padding-right: 30px;
}

.margin-Top {
  margin-top: 30px;
}
.active {
  color: #1bbb9f !important;
  /* border-bottom: 3px solid #1bbb9f !important; */
}
.active-a:hover{
   color: #1bbb9f !important;
}
.title-find {
  position: relative;
}
.one {
  position: absolute;
  top: 0px;
  left: 1px;
  background-color: #1bbb9f;
  width: 6px;
  height: 18px;
}
.list li {
  float: left;
  border: 1px solid #eee;
  width: 540px;
  height: 140px;
  padding: 10px;
}
.list li:hover {
  box-shadow: 0 0 5px #ccc;
}
.list li:first-child {
  margin-right: 20px;
}
.list-four li:first-child {
  margin-bottom: 17px;
}
.list-four li:nth-child(2) {
  margin-bottom: 17px;
}
.list-four li:nth-child(odd) {
  margin-right: 20px;
}
.list-act li {
  float: left;
  border: 1px solid #eee;
  width: 550px;
  padding: 10px;
}
.v-img-cover {
  width: 180px;
  height: 120px;
}
.v-act-img {
  width: 80px;
  height: 50px;
}
.list-act li:nth-child(odd) {
  margin-right: 20px;
}
.list-act li:nth-child(1) {
  margin-bottom: 15px;
}
.buttonDetails {
  width: 116px;
  height: 34px;
  border-width: 0px;
  background: #1bbb9f;
  cursor: pointer;
  outline: none;
  font-family: Microsoft YaHei;
  color: white;
  font-size: 14px;
  padding-right: 15px;
}
.config {
  color: #666;
  font-size: 12px;
  margin-right: 14px;
}
</style>
