|
|
|
@ -1,7 +1,40 @@ |
|
|
|
|
|
|
|
<!-- 自选股页面 --> |
|
|
|
<template> |
|
|
|
<view> |
|
|
|
<view class="container"> |
|
|
|
<!-- 自定义导航栏 --> |
|
|
|
<view class="custom-navbar"> |
|
|
|
<view class="navbar-content"> |
|
|
|
<view class="navbar-left"> |
|
|
|
<view class="back-btn" @click="goBack"> |
|
|
|
<text class="back-icon">‹</text> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="navbar-center"> |
|
|
|
<text class="navbar-title">我的自选</text> |
|
|
|
</view> |
|
|
|
<view class="navbar-right"> |
|
|
|
<image |
|
|
|
class="navbar-btn" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/ba5c8a2eda065274e868bcd9b2d7d914.png" |
|
|
|
@click="onFirstButtonClick" |
|
|
|
mode="aspectFit" |
|
|
|
></image> |
|
|
|
<image |
|
|
|
class="navbar-btn" |
|
|
|
src="https://d31zlh4on95l9h.cloudfront.net/images/a4ae8952aeae90dac6d2b4c221c65fa9.png" |
|
|
|
@click="onSecondButtonClick" |
|
|
|
mode="aspectFit" |
|
|
|
></image> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
|
|
|
|
<!-- 页面内容 --> |
|
|
|
<view class="page-content"> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
@ -12,11 +45,103 @@ |
|
|
|
} |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
// 返回上一页 |
|
|
|
goBack() { |
|
|
|
uni.navigateBack() |
|
|
|
}, |
|
|
|
|
|
|
|
// 第一个按钮点击事件 |
|
|
|
onFirstButtonClick() { |
|
|
|
console.log('第一个按钮被点击') |
|
|
|
// 这里可以添加具体的功能逻辑 |
|
|
|
}, |
|
|
|
|
|
|
|
// 第二个按钮点击事件 |
|
|
|
onSecondButtonClick() { |
|
|
|
console.log('第二个按钮被点击') |
|
|
|
// 这里可以添加具体的功能逻辑 |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style> |
|
|
|
.container { |
|
|
|
width: 100%; |
|
|
|
height: 100vh; |
|
|
|
background-color: #f5f5f5; |
|
|
|
} |
|
|
|
|
|
|
|
/* 自定义导航栏 */ |
|
|
|
.custom-navbar { |
|
|
|
position: fixed; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
right: 0; |
|
|
|
z-index: 999; |
|
|
|
background-color: #ffffff; |
|
|
|
border-bottom: 1px solid #e5e5e5; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-content { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
height: 44px; |
|
|
|
padding: 0 15px; |
|
|
|
/* 适配状态栏高度 */ |
|
|
|
padding-top: var(--status-bar-height, 20px); |
|
|
|
min-height: calc(44px + var(--status-bar-height, 20px)); |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-left { |
|
|
|
flex: 0 0 auto; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.back-btn { |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.back-icon { |
|
|
|
font-size: 24px; |
|
|
|
color: #333333; |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-center { |
|
|
|
flex: 1; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-title { |
|
|
|
font-size: 18px; |
|
|
|
font-weight: 500; |
|
|
|
color: #333333; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-right { |
|
|
|
flex: 0 0 auto; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 10px; |
|
|
|
} |
|
|
|
|
|
|
|
.navbar-btn { |
|
|
|
width: 24px; |
|
|
|
height: 24px; |
|
|
|
} |
|
|
|
|
|
|
|
/* 页面内容 */ |
|
|
|
.page-content { |
|
|
|
padding-top: calc(44px + var(--status-bar-height, 20px) + 1px); |
|
|
|
min-height: calc(100vh - 44px - var(--status-bar-height, 20px) - 1px); |
|
|
|
} |
|
|
|
</style> |