<template>
	<div class="main-background" alive="1">
		<div class="slogon" @click="sayHello">
			<image :src="sologonImg" class="slogon-img"  resize="contain"></image>
			<text class='slogon-title'> {{title}} </text>
		</div>
		<div class="setting">
			<text class="setting-title" @click="jumpSDK"> mQuick SDK </text>
		</div>

	</div>
</template>

<script>
const modal = mquick.requireModule("modal");
const navigator = mquick.requireModule("navigator");
export default {
  data: {
    sologonImg:
      "https://gw.alipayobjects.com/zos/rmsportal/TbQaxgNGbhncQyuqbspI.png",
    title: " Hello World ! "
  },
  methods: {
    sayHello() {
      console.log(mqEnvironment.deviceWidth);
      modal.toast({
        message: "Hello,this is alibaba!",
        duration: 0.3
      });
    },
    jumpSDK() {
      navigator.push(
        {
          url: "/mDemo/environment.js",
          animated: "true"
        },
        event => {
          console.log(event);
        }
      );
    }
  }
};
</script>


<style>
.main-background {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
}

.slogon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 20px;
  flex: 3;
}

.slogon-title {
  margin-top: 20px;
  font-size: 70px;
  color: #959595;
}

.slogon-img {
  width: 200px;
  height: 200px;
}

.setting {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1;
  margin: 10px;
}

.setting-img {
  height: 30px;
  width: 30px;
}
.setting-title {
  text-decoration: underline;
  font-size: 28px;
  margin: 28px;
  color: #42b983;
}

.jump-button {
  font-size: 30px;
  height: 100px;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 40px;
  margin-left: 60px;
  margin-right: 60px;
  border-width: 1px;
  color: rgb(65, 184, 131);
  border-color: rgb(65, 184, 131);
  background-color: rgba(65, 184, 131, 0.2);
}
</style>
