<template>
  <view class="home">
    <view class="home-header">
      <view class="home-header-title">
        <!-- <uni-icons type="person-filled" size="18"></uni-icons>
        <text>水工程建设管理</text>
        <uni-icons type="person-filled" size="18"></uni-icons> -->
      </view>
      <view class="home-header-content">
        <view class="home-header-conten-logo">
          <image class="logo-img" src="/static/images/logo/logo.png" />
          <image class="logo-text" src="/static/images/logo/logo-text.png" />
        </view>
        <view class="home-header-conten-bg">
          <image src="/static/images/img/home-bg.png" />
        </view>
      </view>
    </view>
    <view class="home-content">
      <view class="home-content-title">
        <text>常用应用</text>
      </view>
      <view class="home-content-list">
        <view
          v-for="(item, index) in list"
          :key="index"  
          class="home-content-list-item"
          @click="toPage(item.url)"
        >
          <image :src="item.icon" />
          <text>{{ item.text }}</text>
        </view>
      </view>
    </view>
    <view class="home-footer">
      <view class="home-footer-title">
        <text>广东省水利厅</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            text: '项目管理',
            icon: '/static/images/icon/home-project.png',
            url: '/pages/project/list/index'
          },
          {
            text: '资金管理',
            icon: '/static/images/icon/home-money.png',
            url: '/pages/capital/list/index'
          },
          {
            text: '监督检查',
            icon: '/static/images/icon/home-supervise.png',
            url: '/pages/monitoring/list/index'
          },
          {
            text: '项目统计',
            icon: '/static/images/icon/home-total.png',
            url: '/pages/statistics/index'
          },
          {
            text: '隐患排查',
            icon: '/static/images/icon/home-total.png',
            url: '/pages/danger/index'
          }
        ]
      }
    },
    methods: {
      // 跳转页面
      toPage(url) {
        uni.navigateTo({
          url // 目标页面路径
        })
      }
    },
    onLoad: function() {
      
    }
  }
</script>

<style lang="scss" scoped>
.home {
  position: relative;
  height: 100vh;
  .home-header {
    height: 164px;
    background: linear-gradient(to bottom, rgba(0, 179, 157, 1), rgba(0, 179, 157, 0.8), rgba(149, 221, 191, 0.3)); /* 从上到下的渐变色 */
    .home-header-title {
      height: 44px;
      line-height: 44px;
      display: flex;
      justify-content: center;
      color: #fff;
    }
    .home-header-content {
      position: relative;
      height: 120px;
      .home-header-conten-logo {
        display: flex;
        align-items: center;
        padding-top: 20px;
        padding-left: 25px;
        .logo-img {
          width: 40px;
          height: 40px;
        }
        .logo-text {
          width: 113px;
          height: 28px;
          margin-left: 9px;
        }
      }
      .home-header-conten-bg {
        position: absolute;
        bottom: -2px;
        right: 0;
        image {
          width: 240px;
          height: 120px;
        }
      }
    }
  }
  .home-content {
    margin: 20px;
    padding: 16px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 2px 8px 0px #0000000F;
    .home-content-title {
      font-size: 20px;
      padding-bottom: 15px;
    }
    .home-content-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .home-content-list-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        // width: 25%;
        font-size: 14px;
        &:nth-child(-n + 4) {
          padding-bottom: 15px;
        }
        image {
          width: 48px;
          height: 48px;
          margin-bottom: 6px;
        }
      }
    }
  }
  .home-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #8C8C8C;
    padding-bottom: 20px;
  }
}
</style>
