jiace-web/src/views/home/home.vue

<template>
  <div>
    <div class="p0-100">
      <div style="width:100%;display: flex;justify-content: center;">
        <div class="banner">
          <!-- 轮播图 -->
          <el-carousel height="345px" trigger="click">
            <el-carousel-item v-for="item in bannerList" :key="item.id">
              <img :src="item.pic" alt="" @click="handlePage(item.url)" />
            </el-carousel-item>
          </el-carousel>
          <!-- 政策解读 -->
          <div class="unscramble">
            <div class="title">
              <div class="title_top_l">
                <img src="@/assets/image/icon4.png" alt="" />
                <img src="@/assets/image/icon5.png" alt="" />
              </div>
              <router-link
                target="_blank"
                :to="{
                  path: '/portrait',
                  query: { key: 'policyRead', val: '归口' }
                }"
              >
                <div class="title_top_r pointer">
                  更多<i class="el-icon-arrow-right"></i>
                </div>
              </router-link>
            </div>
            <div class="tab_list">
              <el-tabs
                v-model="queryParams2.attributeId"
                @tab-click="handleClick2"
              >
                <el-tab-pane label="科技" name="KJJ"></el-tab-pane>
                <el-tab-pane label="经信" name="JXJ"></el-tab-pane>
                <el-tab-pane label="发改" name="FGW"></el-tab-pane>
                <el-tab-pane label="其他" name="OTHER"></el-tab-pane>
                <div
                  class="tab_item"
                  style="position: relative;padding-right:50px"
                  v-for="(item, index) in list2"
                  :key="item.id"
                >
                  <span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
                  <!-- <span class="text_hidden_one text_18_333 pointer">{{
                    item.title
                  }}</span> -->
                  <span class="text_hidden_one text_18_333 pointer">
                    <router-link
                      target="_blank"
                      :to="{
                        path: '/result',
                        query: { key: 'policyRead', id: item.id }
                      }"
                    >
                      {{ item.title }}
                    </router-link>
                  </span>
                  <i v-if="index < 3">
                    <img src="@/assets/image/new.png" alt="" />
                  </i>
                  <span style="position: absolute;right: 0;top: 0;">{{
                    parseTime(item.listDate, '{m}-{d}')
                  }}</span>
                </div>
              </el-tabs>
            </div>
          </div>
        </div>
        <div class="banner_r">
          <!-- 政策列表 -->
          <el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
            <el-tab-pane
              label="政策法规"
              name="1415156808053559296"
            ></el-tab-pane>
            <el-tab-pane
              label="申报通知"
              name="1415156963146338304"
            ></el-tab-pane>
            <el-tab-pane
              label="政府公示"
              name="1415157002090450944"
            ></el-tab-pane>
            <el-tab-pane label="公告" name="1415157026115424256"></el-tab-pane>
            <el-tab-pane label="其他" name="1415157049267982336"></el-tab-pane>
            <div style="min-height: 290px">
              <div class="banner_r_list" v-for="item in list" :key="item.id">
                <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
                <div class="text_18_333 pointer">
                  <router-link
                    target="_blank"
                    :to="{
                      path: '/result',
                      query: { key: 'policy', id: item.id }
                    }"
                  >
                    {{ item.title }}
                  </router-link>
                </div>
                <span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
              </div>
            </div>
          </el-tabs>
          <!-- 资讯快报 -->
          <div class="bulletin">
            <div class="title">
              <div>
                <img src="@/assets/image/icon4r.png" alt="" />
                <img src="@/assets/image/icon6.png" alt="" />
              </div>
              <router-link
                target="_blank"
                :to="{
                  path: '/portrait',
                  query: { key: 'information', val: '' }
                }"
              >
                <div class="title_top_r pointer">
                  更多<i class="el-icon-arrow-right"></i>
                </div>
              </router-link>
            </div>
            <div class="tab_list">
              <div class="banner_r_list" v-for="item in list3" :key="item.id">
                <!-- <div class="text_18_333 pointer">{{ item.title }}</div> -->
                <div class="text_18_333 pointer">
                  <router-link
                    target="_blank"
                    :to="{
                      path: '/result',
                      query: { key: 'information', id: item.id }
                    }"
                  >
                    {{ item.title }}
                  </router-link>
                </div>
                <span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 城市列表 -->
      <div class="city_list">
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: 'AH', val: '安徽' } }"
          >
            <img src="@/assets/image/city/01.png" alt="" />
            <span>安徽</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '合肥' } }"
          >
            <img src="@/assets/image/city/02.png" alt="" />
            <span>合肥</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '芜湖' } }"
          >
            <img src="@/assets/image/city/03.png" alt="" />
            <span>芜湖</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '蚌埠' } }"
          >
            <img src="@/assets/image/city/04.png" alt="" />
            <span>蚌埠</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '淮南' } }"
          >
            <img src="@/assets/image/city/05.png" alt="" />
            <span>淮南</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '马鞍山' } }"
          >
            <img src="@/assets/image/city/06.png" alt="" />
            <span>马鞍山</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '淮北' } }"
          >
            <img src="@/assets/image/city/07.png" alt="" />
            <span>淮北</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '铜陵' } }"
          >
            <img src="@/assets/image/city/08.png" alt="" />
            <span>铜陵</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '安庆' } }"
          >
            <img src="@/assets/image/city/09.png" alt="" />
            <span>安庆</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '滁州' } }"
          >
            <img src="@/assets/image/city/10.png" alt="" />
            <span>滁州</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '阜阳' } }"
          >
            <img src="@/assets/image/city/11.png" alt="" />
            <span>阜阳</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '宿州' } }"
          >
            <img src="@/assets/image/city/12.png" alt="" />
            <span>宿州</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '六安' } }"
          >
            <img src="@/assets/image/city/13.png" alt="" />
            <span>六安</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '亳州' } }"
          >
            <img src="@/assets/image/city/14.png" alt="" />
            <span>亳州</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '池州' } }"
          >
            <img src="@/assets/image/city/15.png" alt="" />
            <span>池州</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '宣城' } }"
          >
            <img src="@/assets/image/city/16.png" alt="" />
            <span>宣城</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '2', val: '黄山' } }"
          >
            <img src="@/assets/image/city/17.png" alt="" />
            <span>黄山</span>
          </router-link>
        </div>
        <div>
          <router-link
            target="_blank"
            :to="{ path: '/notice', query: { key: '3', val: '合肥区县' } }"
          >
            <img src="@/assets/image/city/18.png" alt="" />
            <span>合肥区县</span>
          </router-link>
        </div>
      </div>
    </div>
    <div class="about">
      <div class="p0-100">
        <p class="about_tit">
          <img src="@/assets/image/icon7.png" alt="" />
          <img src="@/assets/image/about.png" alt="" />
        </p>
        <div class="about_box">
          <div class="banner about_l">
            <img src="@/assets/image/03.png" alt="" />
          </div>
          <div class="about_r">
            <div>
              <h3>以科技创新赋能政策服务</h3>
              <p>
                合肥嘉策信息技术服务有限公司于2018年05月2日成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
              </p>
            </div>
            <div style="margin-top: 53px">
              <h3>嘉策互联网科技创新服务平台</h3>
              <p>
                合肥嘉策信息技术服务有限公司于2018年05月2日成立。法定代表人时加红，公司经营范围包括：信息系统集成咨询...
              </p>
            </div>
            <router-link to="">
              <el-button type="warning">更多</el-button>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="p0-100">
      <div class="cooperation">
        嘉策合作案例
        <!-- <img src="@/assets/image/icon8.png" alt="" /> -->
      </div>
      <div class="city_list">
        <div>
          <img src="@/assets/cooperation/1.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/2.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/3.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/4.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/5.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/6.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/7.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/8.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/9.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/10.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/11.png" alt="" />
        </div>
        <div>
          <img src="@/assets/cooperation/12.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getRotationList,
  getPolicy,
  getPolicyRead,
  getInformation
} from '@/api/home/home';
export default {
  data() {
    return {
      bannerList: [],
      queryParams: {
        labelId: '1415156808053559296'
      },
      queryParams2: {
        attributeId: 'KJJ'
      },
      queryParams3: {
        pageNum: 1,
        pageSize: 7
      },
      // date: this.parseTime(new Date(), '{y}-{m}-{d}'),
      list: [],
      list2: [],
      list3: []
    };
  },
  methods: {
    // 政策列表
    handleClick(tab, event) {
      getPolicy(this.queryParams).then(({ data }) => {
        this.list = data.list;
      });
    },
    // 政策解读
    handleClick2(tab, event) {
      getPolicyRead(this.queryParams2).then(({ data }) => {
        this.list2 = data.list;
      });
    },
    handlePage(url) {
      window.open(url, '_blank');
    }
  },
  created() {
    getRotationList({ pageNum: 1, pageSize: 50 }).then(({ data }) => {
      this.bannerList = data.list;
    });
    this.handleClick();
    this.handleClick2();
    getInformation(this.queryParams3).then(({ data }) => {
      this.list3 = data.list;
    });
  }
};
</script>
<style lang="scss" scoped>
// /deep/.el-carousel__button {
//   width: 8px;
//   height: 8px;
//   border-radius: 50%;
// }
// /deep/.is-active {
//   .el-carousel__button {
//     width: 20px;
//     background-color: #ffa32c;
//     border-radius: 4px;
//   }
// }
/deep/.el-tabs__item {
  padding: 0 30px;
  font-size: 20px;
}
/deep/.el-tabs__item.is-active {
  font-weight: bold;
  color: #3394ff;
}
/deep/.el-tabs__active-bar {
  height: 4px;
  border-radius: 2px;
  background-color: #3394ff;
}
/deep/.el-tabs__nav-wrap::after {
  height: 0;
}
.banner {
  // width: 614px;
  width: 50%;
  margin-right: 20px;
  .el-carousel {
    .el-carousel__item {
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  /deep/.el-carousel__button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }
  /deep/.is-active {
    .el-carousel__button {
      width: 20px;
      background-color: #ffa32c;
      border-radius: 4px;
    }
  }

  .unscramble {
    margin-top: 30px;
    .title {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 40px;
      line-height: 40px;
      text-align: right;
      background-color: #3394ff;
      border-radius: 6px 6px 0px 0px;
      img {
        vertical-align: middle;
        margin-right: 10px;
      }
      .title_top_r {
        font-size: 16px;
        color: #fff;
      }
      span {
        font-size: 16px;
        color: #666;
      }
    }
    .tab_list {
      padding: 0 18px;
      .tab_item {
        height: 68px;
        line-height: 68px;
        display: flex;
        // justify-content: center;
        align-items: center;
        span:nth-child(1) {
          width: 17px;
          font-size: 30px;
          font-family: DIN;
          font-weight: bold;
          font-style: italic;
          color: #999999;
          line-height: 9px;
        }
        span.color {
          color: #ffa32c;
        }
        span:nth-child(2) {
          padding: 0 10px 0 20px;
        }
      }
    }
  }
}
.banner_r {
  // width: 566px;
  width: 48%;
  // /deep/.el-tabs__item {
  //   padding: 0 30px;
  //   font-size: 20px;
  // }
  // /deep/.el-tabs__item.is-active {
  //   font-weight: bold;
  //   color: #3394ff;
  // }
  // /deep/.el-tabs__active-bar {
  //   height: 4px;
  //   border-radius: 2px;
  //   background-color: #3394ff;
  // }
  // /deep/ .el-tabs__nav-wrap::after {
  //   height: 0;
  // }

  .banner_r_list {
    padding: 0 18px;
    position: relative;
    height: 58px;
    line-height: 58px;
    div {
      padding-right: 50px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    span {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
  .bulletin {
    margin-top: 30px;
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      height: 40px;
      background-color: #3394ff;
      border-radius: 6px 6px 0px 0px;
      img {
        vertical-align: middle;
        margin-right: 10px;
      }
      .title_top_r {
        font-size: 16px;
        color: #fff;
      }
    }
    .tab_list {
      padding: 0 18px;
      .tab_item {
        height: 56px;
      }
    }
  }
}
.city_list {
  margin-top: 10px;
  padding: 10px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  div {
    // cursor: pointer;
    // padding: 16px;
    border-radius: 6px;
    overflow: hidden;
    width: 16%;
    height: 80px;
    // margin: 0 0.5% 10px;
    margin-bottom: 10px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    span {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 80px;
      color: #fff;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
}
.about {
  background-color: #f8f8f8;
  .p0-100 {
    // padding-top: 37px;
    // padding-bottom: 26px;
    padding: 30px;
    .about_tit {
      margin-top: 0;
      img {
        vertical-align: middle;
        margin-right: 3px;
      }
    }
    .about_box {
      display: flex;
      .about_l {
        overflow: hidden;
      }
      .about_r {
        flex: 1;
        h3 {
          color: #333;
          font-size: 20px;
        }
        p {
          color: #666;
          font-size: 18px;
          line-height: 30px;
        }
      }
    }
  }
}
.p0-100 {
  .cooperation {
    padding-top: 40px;
    // padding-bottom: 19px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    color: #3394ff;
  }
}
</style>