proginn-frontend/pages/frontend/personal/index.vue

<template>
<div :class="mobile ? 'mobileMain' : ''" :style="{marginTop: mainMarginTop, marginBottom: mobile ? '0px' : '30px !important'}">

    <div v-if="!mobile" class="personal-container">
        <div class="personal-main">
            <!-- 个人信息框 -->
            <div class="personal-info-container">
                <div class="personal-user">
                    <div class="personal-user-avatar">
                        <img class="personal-user-avatar-img" src="https://iph.href.lu/200x200?fg=666666&bg=cccccc" />
                        <span class="personal-user-tag"></span>
                    </div>
                    <div class="personal-user-info">
                        <div class="personal-user-name">
                            <span class="name-cotent">陈世杰jackey（web前端工程师）</span>
                            <LevelTag :level="2"></LevelTag>
                        </div>
                        <div class="personal-user-text">2天前在线 · 431浏览</div>
                        <div class="personal-user-text">2022年2月加入</div>
                    </div>
                </div>
                <div class="personal-user-follow">
                    <p class="personal-report"><a href="">举报</a></p>
                    <div class="personal-share-area">
                        <span class="personal-share-btn"></span>
                        <span class="personal-share-btn"></span>
                    </div>
                    <div class="personal-follow-btn">
                        关注
                    </div>
                </div>
            </div>

            <!-- 内容tab -->
            <div class="personal-content-container">
                <div class="personal-content-tab">
                    <!-- tab框 -->
                    <div v-for="item in tabs" @click="tabSelected = item.id" :key="item.id" class="personal-tab-item" :class="{'cur':tabSelected == item.id}">
                        {{item.label}}  {{item.count}}
                    </div>
                </div>
                <div class="personal-content-main">
                    <!-- 列表内容 -->
                </div>
            </div>
        </div>
        <div class="personal-side">
            <div class="personal-page-link">
                <span>Ta的开发工作主页</span>
                <span class="arrow"></span>
            </div>

            <div class="personal-follow-info">
                <div class="personal-follow-item">
                    <span class="personal-follow-label">关注了</span>
                    <span class="personal-follow-count">5</span>
                </div>
                <div class="personal-follow-item">
                    <span class="personal-follow-label">关注者</span>
                    <span class="personal-follow-count">5</span>
                </div>
            </div>

            <div class="personal-ad-container">

            </div>
        </div>
    </div>
</div>
</template>

<script>
import {
    mapState
} from "vuex"
import qs from "qs"

import LevelTag from "@/components/level-tag.vue";
export default {
    name: 'PersonalIndex',
    components:{
        LevelTag
    },
    data() {
        return {
            baseUrl: '',
            mobile: false,
            // firstLoad: true,
            isWeixinApp: true,
            tabSelected:1,
            tabs:[
                {
                    id:1,
                    label: "动态",
                    count:10
                },
                {
                    id:2,
                    label: "点赞",
                    count:10
                },
                {
                    id:3,
                    label: "文章",
                    count:10
                },
                {
                    id:4,
                    label: "视频课程",
                    count:10
                }
            ]
        }
    },
    head() {
        const {
            title = "",
                keyword = "",
                description = "",
                h1 = "",
                canonical = "",
                metaLocation
        } = this.head || {}
        let obj = {
            title: title,
            meta: [{
                name: "keywords",
                content: keyword
            }, {
                name: "description",
                content: description
            }, {
                name: "h1",
                content: h1
            }],
            link: [{
                rel: "canonical",
                href: canonical
            }]
        }
        if (metaLocation) {
            obj.meta.push({
                name: "location",
                content: metaLocation
            })
        }
        return obj
    },
    computed: {
        ...mapState(["deviceType"]),
        showWxHeader() {
            return !this.deviceType.app && !this.isWeixinApp &&
                (this.deviceType.android || this.deviceType.ios)
        },
        mainMarginTop() {
            if (this.mobile && this.showWxHeader) {
                return '64px !important'
            } else if (this.mobile) {
                return '0px !important'
            } else {
                return '20px !important'
            }
        },

    },

    mounted() {
        this.baseUrl = this.$store.state.domainConfig.siteUrl
        this.isWeixinApp = navigator.userAgent.indexOf("miniProgram") > -1
    },
    methods: {

    }
}
</script>

<style lang="scss">
@import "@/assets/css/frontend/personal.scss";
</style>