<template>
  <view class="safe">
    <u-navbar
      leftIconColor="#eee"
      :title="$lang.safe"
      bgColor="#0c0c0d"
      :placeholder="true"
      :fixed="true"
      height="60"
      @leftClick="back"
    >
    </u-navbar>
    <view
      class="cell"
      v-for="(item, index) in $lang.resetPasswordList"
      :key="index"
      @click="goRouter(item)"
    >
      <view class="lable">{{ item.name }}</view>
      <u-icon
        class="icon"
        name="arrow-right"
        color="#757272"
        size="16"
      ></u-icon>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  onLoad() {},
  computed: {
    ...mapState({
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  methods: {
    back() {
      uni.navigateBack();
    },
    goRouter(item) {
      uni.navigateTo({
        url: item.path,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.safe {
  ::v-deep .u-navbar__content__title {
    color: #eee;
    font-weight: 600;
  }
  .cell {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    align-items: center;
    background: #151617;
    color: #deb366;
    &:active {
      opacity: 0.6;
    }
  }
}
</style>
