<template>
  <div class="page">
    <action-bar title="杭州市,晴" />
    <div class="temperature">
        <text class="number">24</text>
        <text class="centigrade">℃</text>
    </div>
    <text class="temperatureRange">19/26</text>
    <text class="weather">晴</text>
    <scroller class="scroller" showScrollbar="false">
        <div
            v-for="(item, index) in items"
            :key="index"
            class="item">
            <text class="item-text-left">{{item.leftText}}</text>
            <img class="item-icon" :src="item.icon" />
            <text class="item-text-right">{{item.rightText}}</text>
        </div>
  </scroller>
  </div>
</template>

<script>

import ActionBar from "../../components/action-bar.vue";

const component = {
  name: "weather",
  components: { ActionBar },
  data() {
    return {
      items: [
        {
          icon: require('./images/cloudy.png'),
          leftText: '周一',
          rightText: '19/26'
        },
        {
          icon: require('./images/cloudy.png'),
          leftText: '周二',
          rightText: '19/26'
        },
        {
          icon: require('./images/cloudy.png'),
          leftText: '周三',
          rightText: '19/26'
        },
        {
          icon: require('./images/cloudy.png'),
          leftText: '周四',
          rightText: '19/26'
        },  {
          icon: require('./images/cloudy.png'),
          leftText: '周五',
          rightText: '19/26'
        },
        {
          icon: require('./images/cloudy.png'),
          leftText: '周六',
          rightText: '19/26'
        },
        {
          icon: require('./images/cloudy.png'),
          leftText: '周日',
          rightText: '19/26'
        }
      ]
    };
  },
  computed: {
  },
  methods: {
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-image: linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(255,255,255,0.50) 100%);
  background-color: #0083FF;
}
.temperature {
    flex-direction: row;
}
.number {
    font-size: 72px;
    color: #FFFFFF;
}
.centigrade {
    padding-top: 20px;
    font-size: 20px;
    color: #FFFFFF;
}
.temperatureRange {
    font-size: 14px;
    color: #FFFFFF;
    margin-top: 10px;
}
.weather {
    font-size: 18px;
    color: #FFFFFF;
    margin-top: 8px;
}
.scroller {
    border-radius: 16px;
    background-color: rgba(255, 255, 255, 0.23);
    margin-top: 36px;
    height: 60px;
    width: 232px;
}
.item {
    font-size: 18px;
    color: #FFFFFF;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.item-icon {
    width: 30px;
    height: 30px;
}
.item-text-left {
    padding-left: 17px;
    font-size: 18px;
    color: #FFFFFF;
}
.item-text-right {
    padding-right: 17px;
    font-size: 18px;
    color: #FFFFFF;
}
</style>
