<template>
  <div class="page">
    <action-bar title="设置" />
    <scroller class="scroller" showScrollbar="false">
      <div
        class="item"
        @click="itemClick('setting-screen-brightness')">
        <img class="item-icon" resize="center" :src="require('./images/light.png')" />
        <text class="item-name">屏幕亮度</text>
      </div>
      <div
        class="item"
        @click="itemClick('setting-version-update')">
        <img class="item-icon" resize="center" :src="require('./images/version.png')" />
        <text class="item-name">版本更新</text>
      </div>
    </scroller>
  </div>
</template>

<script>
import ActionBar from "../../components/action-bar.vue";
const component = {
  name: "setting",
  components: { ActionBar },
  data() {
    return {
    };
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    itemClick(page) {
      $falcon.navTo(page);
    },
  },
};

export default component;
</script>

<style scoped>
.page {
  align-items: center;
  background-color: black;
}
.scroller {
  flex: 1;
  width: 100%;
}
.item {
  height: 60px;
  flex-direction: row;
  margin-bottom: 12px;
  margin-left: 18px;
  margin-right: 18px;
  align-items: center;
  background-color: #2B2F35;
  border-radius: 16px;
}
.item-icon {
  width: 28px;
  height: 28px;
  margin-left: 17px;
}
.item-name {
  flex: 1;
  color: white;
  font-size: 24px;
  margin-left: 12px;
  margin-right: 12px;
}
</style>
