<template> <scroll class="wrapper mine" :pullup="true" :bounce="true" > <div class="head" > <img class="bg" :src="image.head_bg"> <div class="ref-block" @click="clearBoth()"> <img :src="image.ref"/> </div> <div class="contentBox"> <img class="header-icon" :src="userDetail.avatar"> <p class="name">{{userDetail.nickname}}</p> <p class="id">学员号:{{userDetail.user_id}}</p> </div> </div> <div class="outBox"> <div class="list"> <van-cell title="我的订单" ref="order" to="/order" @click="toOrder" is-link> <img slot="icon" :src="image.order" > </van-cell> <van-cell title="宝宝档案" ref="bbda" to="/bbda" @click="toBbda" is-link> <img slot="icon" :src="image.babyicon" > </van-cell> </div> </div> <bottom-tab/> </scroll> </template> <script> import bottomTab from './public/bottomTab'; import {mineImage} from "../util/imgUrl"; import { Cell,Toast } from 'vant'; export default { name: "mine", components:{ bottomTab, [Cell.name]:Cell }, data(){ return { image:mineImage, userDetail:{} } }, mounted(){ this.initPage() }, methods:{ initPage(){ this.userDetail = JSON.parse(localStorage.getItem('userDesc')) }, clearBoth(){ this.$sa.track('buttonClick',{ tabTitle:'我的', moduleTitle:'我的', buttonType:'清楚缓存', buttonName:'清楚缓存' }); localStorage.clear(); Toast('清除成功') }, toOrder(){ this.$sa.quick('trackHeatMap',this.$refs.order) }, toBbda(){ this.$sa.quick('trackHeatMap',this.$refs.bbda) } } } </script> <style scoped lang="less"> @import "../util/public"; .mine{ height: 100vh; background: #F5F5F9; overflow: auto; .head{ .contentBox{width: 335 * @toVw;height: 104 * @toVw;background: white;box-shadow:0px 1px 6px 0px rgba(64,169,255,0.3); border-radius: 8 * @toVw;position: absolute;top: 100 * @toVw;left: 20 * @toVw; } .bg{width: 100%;} .ref-block{ width: 25 * @toVw; height: 25 * @toVw; position: absolute; right: 28 * @toVw; top: 56 * @toVw; img{ width: 100%; } } width: 375 * @toVw; height: 160 * @toVw ; background-size: 100% 100%; color: white; text-align: center; .header-icon{ width: 72 * @toVw; height:72 * @toVw; border-radius: 10000px; border: 1 * @toVw solid white; position: absolute; top: -40 * @toVw; left: 134* @toVw; } .name{ font-size:20* @toVw; font-family:PingFang-SC-Medium; font-weight:normal; line-height:20* @toVw; margin-top:42 * @toVw; color: black; font-weight: 500; } .id{ font-size:14* @toVw; font-family:PingFang-SC-Medium; font-weight:normal; color: #808080; border-radius: 200px; line-height:17* @toVw; background-color: white; margin-top:12 * @toVw; // padding: 10 20*@toVw 0 ; } } .outBox{background: white;box-shadow:0px 1px 6px 0px rgba(64,169,255,0.3);width: 335 * @toVw;border-radius: 8 * @toVw;margin-top: 62*@toVw; overflow: hidden; .list{ .van-cell{ font-size: 16px; padding-top:12 * @toVw ; padding-bottom: 12 * @toVw ; img{margin-right:12 * @toVw;width: 21 * @toVw;height:21 * @toVw ;} } .van-cell:not(:last-child)::after{right: 15px;} } } } </style>