<template>
  <div
    id="guide_container"
  >
    <div class="guide_item" v-for="(item,index) in guides" :key="index">
      <p class="title">{{ index + 1 }}、{{ item.desc }}</p>
      <img :src="item.img" alt="" class="guide_img">
    </div>

  </div>
</template>
<script>
var $this;
export default {
  name: "guide_container",
  data() {
    return {
      guides: [
        {
          img: "https://img.shuimuai.com/mpapp/ext.jpg",
          desc: "确认手机的【蓝牙】和【位置信息】处于开启状态"
        },
        {
          img: "https://img.shuimuai.com/mpapp/0.jpg",
          desc: "打开手机【设置】进入【应用设置】"
        },
        {
          img: "https://img.shuimuai.com/mpapp/1.jpg",
          desc: "进入【应用管理】"
        },
        {
          img: "https://img.shuimuai.com/mpapp/2.jpg",
          desc: "找到【微信】应用,点击进入"
        },
        {
          img: "https://img.shuimuai.com/mpapp/3.jpg",
          desc: "找到【权限管理】，点击进入"
        },
        {
          img: "https://img.shuimuai.com/mpapp/4.jpg",
          desc: "找到【定位权限】，点击查看是否在【允许】或者【仅在使用中允许】的选项"
        },
        {
          img: "https://img.shuimuai.com/mpapp/5.jpg",
          desc: "找到【蓝牙权限】，点击查看是否选中【始终允许】"
        }
      ]
    };
  },
  methods: {},
  mounted() {
  },
  created() {
    $this = this;
  },
};
</script>
<style scoped>
#guide_container {
  padding: 10px 20px;
  background-color: #31295b;

}

.title {
  font-size: 16px;
  color: #FFFFFF;
}

.guide_img {
  width: 237px;
  height: 479px;
}

.guide_item {
  margin: 10px 0;
}
</style>
