generated from duanshuwen/webapp-vue-frontend
70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<template>
|
|
<div :class="['top-nav', colorClass]">
|
|
<img class="icon" :src="backSrc" alt="back" @click="emitBack" />
|
|
|
|
<div class="nav-title">{{ title }}</div>
|
|
|
|
<img v-if="showHistory" class="icon-history" :src="historySrc" alt="history" @click="emitHistory" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import back from '@/assets/images/back_left.png';
|
|
import backWhite from '@/assets/images/back_left_white.png';
|
|
import history from '@/assets/images/history_line.png';
|
|
import historyWhite from '@/assets/images/history_line_white.png';
|
|
|
|
const props = defineProps({
|
|
title: { type: String, default: '' },
|
|
color: { type: String, default: 'white' }, // 'white' or 'black'
|
|
showHistory: { type: Boolean, default: true }
|
|
});
|
|
|
|
const emit = defineEmits(['back', 'history']);
|
|
|
|
const emitBack = () => emit('back');
|
|
const emitHistory = () => emit('history');
|
|
|
|
const backSrc = computed(() => (props.color === 'white' ? backWhite : back));
|
|
const historySrc = computed(() => (props.color === 'white' ? historyWhite : history));
|
|
const colorClass = computed(() => (props.color === 'white' ? 'nav-white' : 'nav-black'));
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-nav {
|
|
position: absolute;
|
|
top: 44px;
|
|
left: 20px;
|
|
right: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.top-nav .icon,
|
|
.top-nav .icon-history {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
display: block;
|
|
}
|
|
|
|
.nav-title {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.nav-white .nav-title {
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-black .nav-title {
|
|
color: #000;
|
|
}
|
|
</style>
|