Files
HyperBilibili/src/components/TitleBar/TitleBar.ux
T
2025-01-23 23:41:53 +08:00

68 lines
1.7 KiB
XML

<import name="time-view" src="@components/TimeView/TimeView.ux"></import>
<template>
<div>
<div if="{{!useRowLayout}}" class="comp-root">
<time-view style="position: absolute;"></time-view>
<div class="titlebar" @click="RouterBack()">
<image src="/common/icons8-back-100.png" style="width: 30px; height: 30px; margin-right: 5px"></image>
<text style="font-size: 32px; font-weight: normal; margin-top: 3px">{{ _parentVM.$t(title) }}</text>
</div>
</div>
<div if="{{useRowLayout}}" class="comp-root row">
<div class="titlebar bar-row" style="{{barRowStyle}}" @click="RouterBack()">
<image src="/common/icons8-back-100.png" style="width: 30px; height: 30px; margin-right: 5px"></image>
<text style="font-size: 32px; font-weight: normal">{{ _parentVM.$t(title) }}</text>
<time-view style="position: relative;"></time-view>
</div>
</div>
</div>
</template>
<script>
import router from "@system.router"
export default {
props: ["title"],
data: {
barRowStyle: {},
useRowLayout: false
},
RouterBack() {
router.back()
},
onInit() {
const deviceInfo = global.DEVICE_INFO;
if (deviceInfo.screenShape == "rect"){
this.barRowStyle["width"] = `${deviceInfo.screenWidth}px`
this.useRowLayout = true
}
}
}
</script>
<style lang="less">
@import '@less/global.less';
.comp-root {
flex-direction: column;
justify-content: center;
align-items: center;
}
.row {
flex-direction: row;
}
.titlebar {
margin-top: 45px;
align-items: center;
justify-content: center;
padding-bottom: 10px;
}
.bar-row {
justify-content: flex-start;
margin-top: 10px;
margin-left: 100px;
}
</style>