102 lines
2.3 KiB
Vue
102 lines
2.3 KiB
Vue
<template>
|
|
<div class="c-user-page-top">
|
|
<div class="title">{{ pageTitle }}</div>
|
|
<div class="top-right">
|
|
<div v-for="(n, index) in linkList" :key="n.name" class="right-item" :class="currentLink == n.name ? 'act' : ''" @click="toLink(n)">
|
|
<div class="iconfont" :class="'icon-' + n.icon" :style="{ 'font-size': n.iconSize }"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, watch } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: '标题',
|
|
},
|
|
});
|
|
|
|
let pageTitle = ref(props.title);
|
|
|
|
let linkList = reactive([
|
|
{ title: '帮助', name: 'help', icon: 'problem', iconSize: '30px', path: '' },
|
|
{ title: '我的', name: 'my', icon: 'user', iconSize: '30px', path: '/sub-operation-service/userCenter' },
|
|
{ title: '首页', name: 'home', icon: 'home', iconSize: '30px', path: '/sub-operation-service/home' },
|
|
]);
|
|
|
|
let currentLink = ref(null);
|
|
|
|
watch(
|
|
() => props.title,
|
|
() => {
|
|
pageTitle.value = props.title;
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
|
|
const toLink = (item) => {
|
|
currentLink.value = item.name;
|
|
if (item.path && item.path != '') {
|
|
router.push(item.path);
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.c-user-page-top {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
justify-content: space-between;
|
|
.title,
|
|
.top-right {
|
|
display: inline-flex;
|
|
vertical-align: middle;
|
|
}
|
|
.title {
|
|
font-size: 22px;
|
|
font-weight: 500;
|
|
}
|
|
.top-right {
|
|
justify-content: flex-start;
|
|
gap: 40px;
|
|
.right-item {
|
|
display: inline-block;
|
|
width: 64px;
|
|
height: 64px;
|
|
border-radius: 50%;
|
|
background: $color-fff;
|
|
position: relative;
|
|
cursor: pointer;
|
|
.iconfont {
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
&.act {
|
|
background: $color-main-table-header !important;
|
|
border: 1px solid $color-fff;
|
|
.iconfont {
|
|
color: $color-main;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-item:hover {
|
|
background: $color-main-table-header !important;
|
|
border: 1px solid $color-fff;
|
|
.iconfont {
|
|
color: $color-main;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|