<template>
|
<div>
|
<!-- 用户头像和 id -->
|
<article>
|
<div>
|
<div class="my-box-header">
|
<img :src="require('@/assets/image/icon--my.png')" alt="" />
|
<div>Profile</div>
|
</div>
|
<div class="text-right">ID:{{ userInfo.usercode }}</div>
|
</div>
|
</article>
|
<tabsProfile />
|
<main>
|
<div class="friends-warp">
|
<div class="friends-box">
|
<div class="icon-geren">
|
<img src="@/assets/svg/iICInviteFriends.svg" alt="" />
|
</div>
|
<div class="center-text">
|
<div class="text1">Invite Friends</div>
|
<div class="text2">Invite friends to make money</div>
|
</div>
|
</div>
|
</div>
|
<div class="friends-warp" style="margin: 20px 0">
|
<div class="friends-box">
|
<div class="icon-geren download-box">
|
<img class="google" src="@/assets/svg/google-play.svg" alt="" />
|
<img src="@/assets/svg/App Store.svg" alt="" />
|
</div>
|
<div class="center-text">
|
<div class="text1">Download APP</div>
|
</div>
|
</div>
|
<div>
|
<img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
|
</div>
|
</div>
|
<div class="Safe">Safe</div>
|
|
<section>
|
<div class="section-box">
|
<div class="section-left">
|
<img
|
class="jiantouxia safe"
|
src="@/assets/svg/ic_more_safe.svg"
|
alt=""
|
/>
|
<span class="section-text">Safe</span>
|
</div>
|
<div class="section-right">
|
<img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
|
</div>
|
</div>
|
<div class="section-box">
|
<div class="section-left">
|
<img class="jiantouxia safe" src="@/assets/svg/shezhi.svg" alt="" />
|
<span class="section-text">General</span>
|
</div>
|
<div class="section-right">
|
<img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
|
</div>
|
</div>
|
<div class="section-box">
|
<div class="section-left">
|
<img
|
class="jiantouxia safe"
|
src="@/assets/svg/about us.svg"
|
alt=""
|
/>
|
<span class="section-text">About Us</span>
|
</div>
|
<div class="section-right">
|
<img class="jiantouxia" src="@/assets/svg/jiantouxia.svg" alt="" />
|
</div>
|
</div>
|
<div class="exit" @click="loginOut">EXIT</div>
|
</section>
|
<div class="exit-text">
|
Please do not disclose passwords,text messages and Goodle verification
|
codes to anyone,including exchange staff.
|
</div>
|
</main>
|
</div>
|
</template>
|
|
<script>
|
import { mapGetters } from "vuex";
|
import tabsProfile from "./tabs-profile.vue";
|
import { setStorage } from "@/utils/utis";
|
|
export default {
|
components: {
|
tabsProfile,
|
},
|
computed: {
|
...mapGetters({
|
userInfo: "user/userInfo",
|
}),
|
},
|
methods: {
|
loginOut() {
|
this.$store.commit("user/SET_OUT");
|
setStorage("popNotice", false);
|
this.$router.push("/home");
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
main {
|
.section-box {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 25px;
|
color: #d2d2dc;
|
.section-left {
|
display: flex;
|
align-items: center;
|
.section-text {
|
margin-left: 20px;
|
}
|
.safe {
|
width: 40px;
|
}
|
}
|
}
|
margin: 40px 80px;
|
|
section {
|
padding: 30px 60px;
|
}
|
.Safe {
|
color: #9691fa;
|
background-color: #f5f5f7;
|
padding: 30px 60px;
|
}
|
.friends-warp {
|
display: flex;
|
padding: 30px 60px;
|
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
|
justify-content: space-between;
|
align-items: center;
|
}
|
.friends-box {
|
display: flex;
|
|
align-items: center;
|
|
.text1 {
|
color: #000;
|
}
|
.text2 {
|
color: #d2d2dc;
|
margin-top: 10px;
|
}
|
img {
|
width: 80px;
|
margin-right: 30px;
|
}
|
.download-box {
|
img {
|
width: 130px;
|
}
|
}
|
.icon-geren {
|
display: flex;
|
flex-direction: column;
|
|
.google {
|
margin-bottom: 10px;
|
}
|
}
|
}
|
.jiantouxia {
|
width: 30px;
|
}
|
.exit {
|
background-color: #ff1414;
|
text-align: center;
|
color: #fff;
|
margin-top: 60px;
|
margin-bottom: 50px;
|
line-height: 80px;
|
}
|
.exit-text {
|
text-align: center;
|
font-size: 20px;
|
color: #d2d2dc;
|
}
|
}
|
article {
|
display: flex;
|
justify-content: right;
|
margin-right: 60px;
|
margin-top: 40px;
|
.my-box-header {
|
display: flex;
|
align-items: flex-end;
|
color: #9691fa;
|
img {
|
width: 60px;
|
margin-right: 10px;
|
}
|
}
|
.text-right {
|
text-align: right;
|
color: #d2d2dc;
|
font-size: 35px;
|
}
|
}
|
</style>
|
