<template>
  <div class="main_content">
    <img class="banner" src="https://webapp-pub.ezijing.com/www/pc/goverment/goverment_banner.png" />
    <div class="content_part">
      <div class="part_title">{{ $t('industry.tit') }}</div>
      <div class="part_desc">
        {{ $t('industry.desc') }}
      </div>
    </div>
    <div class="content_part1">
      <div class="part_title" v-html="$t('industry.tit1')"></div>
      <div class="part_desc" v-html="$t('industry.desc1')"></div>
      <img
        class="part_img"
        :src="
          $cookies.get('lang') === 'en-US'
            ? 'https://webapp-pub.ezijing.com/www/pc/goverment/goverment_con1_en.png'
            : 'https://webapp-pub.ezijing.com/www/pc/goverment/goverment_con1.png'
        " />
      <div class="part_zj">
        <div class="zj_tit">
          <span>
            {{ $t('industry.provide_tit') }}
          </span>
        </div>
        <div class="zj_con">
          <div class="con_item" v-for="(item, index) in zjList" :key="index">
            <img :src="item.img" class="item_img" />
            <img :src="item.imgActive" class="item_imgActive" />
            <div class="item_tit">{{ item.tit }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="content_part2">
      <div class="part_title" v-html="$t('industry.focus_tit')"></div>
      <div class="zj_con">
        <div class="con_item" v-for="(item, index) in zyList" :key="index">
          <div class="mask"></div>
          <img :src="item.img" class="item_img" />
          <img :src="item.imgActive" class="item_imgActive" />
          <div class="item_tit">{{ item.tit }}</div>
          <div class="item_desc" v-html="item.desc"></div>
          <div class="item_tips" v-html="item.tips"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zjList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj1.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj1_active.png',
          tit: this.$t('industry.provide_list.item1')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj2.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj2_active.png',
          tit: this.$t('industry.provide_list.item2')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj3.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj3_active.png',
          tit: this.$t('industry.provide_list.item3')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj4.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj4_active.png',
          tit: this.$t('industry.provide_list.item4')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj5.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj5_active.png',
          tit: this.$t('industry.provide_list.item5')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj6.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj6_active.png',
          tit: this.$t('industry.provide_list.item6')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj7.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj7_active.png',
          tit: this.$t('industry.provide_list.item7')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj8.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj8_active.png',
          tit: this.$t('industry.provide_list.item8')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj9.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj9_active.png',
          tit: this.$t('industry.provide_list.item9')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj10.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zj10_active.png',
          tit: this.$t('industry.provide_list.item10')
        }
      ],
      zyList: [
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy1.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy1_active.png',
          tit: this.$t('industry.focus_list.item1_tit'),
          desc: this.$t('industry.focus_list.item1_desc'),
          tips: this.$t('industry.focus_list.item1_tips')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy2.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy2_active.png',
          tit: this.$t('industry.focus_list.item2_tit'),
          desc: this.$t('industry.focus_list.item2_desc'),
          tips: this.$t('industry.focus_list.item2_tips')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy3.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy3_active.png',
          tit: this.$t('industry.focus_list.item3_tit'),
          desc: this.$t('industry.focus_list.item3_desc'),
          tips: this.$t('industry.focus_list.item3_tips')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy4.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy4_active.png',
          tit: this.$t('industry.focus_list.item4_tit'),
          desc: this.$t('industry.focus_list.item4_desc'),
          tips: this.$t('industry.focus_list.item4_tips')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy5.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy5_active.png',
          tit: this.$t('industry.focus_list.item5_tit'),
          desc: this.$t('industry.focus_list.item5_desc'),
          tips: this.$t('industry.focus_list.item5_tips')
        },
        {
          img: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy6.png',
          imgActive: 'https://webapp-pub.ezijing.com/www/pc/goverment/icon_zy6_active.png',
          tit: this.$t('industry.focus_list.item6_tit'),
          desc: this.$t('industry.focus_list.item6_desc'),
          tips: this.$t('industry.focus_list.item6_tips')
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.main_content {
  background: #ffff;
  width: 100%;
  .banner {
    width: 100%;
    height: 580px;
  }
  .content_part {
    width: 100%;
    height: 316px;
    background: #f9f8f8;

    padding: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .part_title {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .part_desc {
      margin-top: 36px;
      font-size: 18px;
      font-weight: 400;
      line-height: 34px;
      color: #666666;
      // white-space: nowrap;
      // text-align: center;
    }
  }
  .content_part1 {
    margin: 120px auto;
    text-align: center;
    .part_title {
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .part_desc {
      font-size: 20px;
      font-weight: 500;
      color: #333333;
      line-height: 34px;
      margin-top: 28px;
    }
    .part_img {
      width: 533px;
      height: 587px;
      margin-top: 67px;
    }
    .part_zj {
      margin: 32px auto;
      max-width: 1200px;

      .zj_tit {
        // max-width: 270px;
        // min-width: 80px;
        // height: 22px;
        text-align: left;

        span {
          font-size: 20px;
          font-weight: 400;
          color: #424242;
          padding-bottom: 7px;
          border-bottom: 1px solid #aa1941;
          display: inline-block;
        }
      }
      .zj_con {
        max-width: 1200px;
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .con_item {
          width: 228px;
          height: 120px;
          background: #f4f4f4;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          margin-top: 15px;
          box-sizing: border-box;
          .item_img {
            display: block;
          }
          .item_imgActive {
            display: none;
          }
          .item_tit {
            font-size: 16px;
            font-weight: 500;
            color: #424242;
            margin-top: 20px;
          }
          &:hover {
            background: #aa1941;
            .item_tit {
              color: #ffffff;
            }
            .item_img {
              display: none;
            }
            .item_imgActive {
              display: block;
            }
          }
        }
      }
    }
  }
  .content_part2 {
    width: 100%;
    // height: 1167px;
    background: #f9f8f8;
    padding-top: 110px;
    .part_title {
      margin: auto;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      color: #333333;
    }
    .zj_con {
      width: 1200px;
      margin: 81px auto;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .con_item {
        width: 380px;
        // height: 400px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        // justify-content: space-between;
        cursor: pointer;
        border-bottom: 1px solid #aa1941;
        padding: 49px 27px 57px 32px;
        position: relative;
        background: rgba(255, 255, 255, 0.39);
        box-shadow: 0px 1px 12px rgba(0, 0, 0, 0.13);
        margin-top: 29px;
        .mask {
          position: absolute;
          background: rgba(0, 0, 0, 0);
          opacity: 1;
          top: 0;
          right: 0;
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
        .item_img {
          display: block;
        }
        .item_imgActive {
          display: none;
        }
        .item_tit {
          font-size: 22px;
          font-weight: 500;
          color: #424242;
          margin-top: 27px;
        }
        .item_desc {
          font-size: 16px;
          font-weight: 400;
          line-height: 32px;
          color: #666666;
          margin-top: 20px;
        }
        .item_tips {
          font-size: 20px;
          font-weight: 500;
          // line-height: 34px;
          color: #333333;
          margin-top: 8px;
        }
        &:hover {
          position: relative;
          border: none;
          .mask {
            position: absolute;
            background: rgba(0, 0, 0, 0.64);
            top: 0;
            right: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
          }
          .item_tit {
            color: #ffffff;
            z-index: 20;
          }
          .item_tips {
            z-index: 20;
            color: #ffffff;
          }
          .item_desc {
            z-index: 20;
            color: #ffffff;
          }
          .item_img {
            display: none;
          }
          .item_imgActive {
            display: block;
            z-index: 20;
          }
        }
      }
      .con_item:nth-child(1):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg1.png);
      }
      .con_item:nth-child(2):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg2.png);
      }
      .con_item:nth-child(3):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg3.png);
      }
      .con_item:nth-child(4):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg4.png);
      }
      .con_item:nth-child(5):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg5.png);
      }
      .con_item:nth-child(6):hover {
        background: url(https://webapp-pub.ezijing.com/www/pc/goverment/zy_bg6.png);
      }
    }
  }
}
</style>
