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

<template>
  <div>
    <div class="p0-100">
      <div style="display:flex">
        <div class="banner">
          <!-- 轮播图 -->
          <el-carousel height="345px" trigger="click">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index">
              <img :src="item" alt="" />
            </el-carousel-item>
          </el-carousel>
          <!-- 政策解读 -->
          <div class="unscramble">
            <div class="title">
              <div class="title_top">
                <div class="title_top_l">
                  <img src="@/assets/image/icon4.png" alt="" />
                  <img src="@/assets/image/icon5.png" alt="" />
                </div>
                <div class="title_top_r pointer">
                  更多<i class="el-icon-arrow-right"></i>
                </div>
              </div>
              <span>{{ date }}</span>
            </div>
            <div class="tab_list">
              <el-tabs
                v-model="queryParams2.attributeId"
                @tab-click="handleClick2"
              >
                <el-tab-pane label="经信" name="JXJ"></el-tab-pane>
                <el-tab-pane label="科技" name="KJJ"></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"
                  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>
                  <i v-if="index < 3">
                    <img src="@/assets/image/new.png" alt="" />
                  </i>
                </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>
                <span>{{ parseTime(item.listDate, '{m}-{d}') }}</span>
              </div>
            </div>
          </el-tabs>
          <!-- 资讯快报 -->
          <div class="bulletin">
            <div class="title">
              <div>
                <img src="@/assets/image/icon6.png" alt="" />
              </div>
              <div class="title_top_r pointer">
                更多<i class="el-icon-arrow-right"></i>
              </div>
            </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>
                <span>{{ parseTime(item.createTime, '{m}-{d}') }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 城市列表 -->
      <div class="city_list">
        <div>
          <img src="@/assets/image/city/01.png" alt="" />
          <span>安徽</span>
        </div>
        <div>
          <img src="@/assets/image/city/02.png" alt="" />
          <span>合肥</span>
        </div>
        <div>
          <img src="@/assets/image/city/03.png" alt="" />
          <span>芜湖</span>
        </div>
        <div>
          <img src="@/assets/image/city/04.png" alt="" />
          <span>蚌埠</span>
        </div>
        <div>
          <img src="@/assets/image/city/05.png" alt="" />
          <span>淮南</span>
        </div>
        <div>
          <img src="@/assets/image/city/06.png" alt="" />
          <span>马鞍山</span>
        </div>
        <div>
          <img src="@/assets/image/city/07.png" alt="" />
          <span>淮北</span>
        </div>
        <div>
          <img src="@/assets/image/city/08.png" alt="" />
          <span>铜陵</span>
        </div>
        <div>
          <img src="@/assets/image/city/09.png" alt="" />
          <span>安庆</span>
        </div>
        <div>
          <img src="@/assets/image/city/10.png" alt="" />
          <span>滁州</span>
        </div>
        <div>
          <img src="@/assets/image/city/11.png" alt="" />
          <span>阜阳</span>
        </div>
        <div>
          <img src="@/assets/image/city/12.png" alt="" />
          <span>宿州</span>
        </div>
        <div>
          <img src="@/assets/image/city/13.png" alt="" />
          <span>六安</span>
        </div>
        <div>
          <img src="@/assets/image/city/14.png" alt="" />
          <span>亳州</span>
        </div>
        <div>
          <img src="@/assets/image/city/15.png" alt="" />
          <span>池州</span>
        </div>
        <div>
          <img src="@/assets/image/city/16.png" alt="" />
          <span>宣城</span>
        </div>
        <div>
          <img src="@/assets/image/city/17.png" alt="" />
          <span>黄山</span>
        </div>
        <div>
          <img src="@/assets/image/city/18.png" alt="" />
          <span>合肥高新区</span>
        </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>
            <el-button type="warning">更多</el-button>
          </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/image/city/01.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/02.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/03.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/04.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/05.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/06.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/07.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/08.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/09.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/10.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/11.png" alt="" />
        </div>
        <div>
          <img src="@/assets/image/city/12.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import logoImg1 from '@/assets/image/banner1.png';
import logoImg2 from '@/assets/image/banner2.png';
import logoImg3 from '@/assets/image/banner3.png';
import { getPolicy, getPolicyRead, getInformation } from '@/api/home/home';
export default {
  data() {
    return {
      bannerList: [logoImg1, logoImg2, logoImg3],
      queryParams: {
        labelId: '1415156808053559296'
      },
      queryParams2: {
        attributeId: 'JXJ'
      },
      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;
      });
    }
  },
  created() {
    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;
  margin-right: 20px;
  /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;
      padding-right: 21px;
      height: 40px;
      line-height: 40px;
      text-align: right;
      background-color: #f3f3f3;
      border-radius: 6px 6px 0px 0px;
      .title_top {
        position: absolute;
        display: flex;
        justify-content: space-between;
        align-items: center;
        bottom: 0;
        padding: 0 20px;
        width: 400px;
        height: 50px;
        background: #3394ff;
        border-radius: 6px 6px 0px 0px;
        .title_top_l {
          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 20px 0 20px;
        }
      }
    }
  }
}
.banner_r {
  width: 566px;
  // /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 21px;
      height: 40px;
      background-color: #f3f3f3;
      border-radius: 6px 6px 0px 0px;
      .title_top_r {
        font-size: 16px;
        color: #666;
      }
    }
    .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;
    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;
    .about_tit {
      margin-top: 0;
      img {
        vertical-align: middle;
        margin-right: 3px;
      }
    }
    .about_box {
      display: flex;
      .about_r {
        h3 {
          color: #333;
          font-size: 20px;
        }
        p {
          color: #666;
          font-size: 18px;
          line-height: 30px;
        }
      }
    }
  }
}
.p0-100 {
  .cooperation {
    padding-top: 47px;
    padding-bottom: 19px;
    text-align: center;
  }
}
</style>