You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

97 lines
2.0 KiB

<template>
<view class="titleContent">
<view class="left">
<uni-icons type="back" size="23" color="#111"></uni-icons>
</view>
<view class="title">深度探索</view>
<view class="right">
<image class="notice" src="/static/deepExploration-images/notice.png" mode="aspectFill"></image>
<image class="history" src="/static/deepExploration-images/history.png" mode="aspectFill"></image>
</view>
</view>
<view class="search">
<input class="searchInput" type="text" placeholder="请输入股票名称、股票代码"
placeholder-style="color: #A6A6A6; font-size: 22rpx;" />
<image class="seachIcon" src="/static/deepExploration-images/search.png" mode=""></image>
</view>
</template>
<script>
</script>
<style scoped lang="scss">
*{
box-sizing: border-box;
}
.titleContent {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 60rpx 40rpx 35rpx;
box-shadow: 2rpx 2rpx 8rpx rgba(0, 0, 0, 0.1);
.left {
display: flex;
align-items: center;
width: 36rpx;
height: 36rpx;
}
.title {
position: absolute;
left: 50%;
transform: translateX(-50%);
color: #000000;
font-family: "PingFang SC";
font-size: 19px;
font-style: normal;
font-weight: 400;
line-height: 25px;
}
.right {
display: flex;
align-items: center;
gap: 20rpx;
.notice {
width: 35rpx;
height: 35rpx;
gap: 20rpx;
}
.history {
width: 32rpx;
height: 30rpx;
align-items: center;
}
}
}
.search {
position: relative;
display: flex;
align-items: center;
background-color: #F3F3F3;
width: calc(100% - 60rpx);
height: 80rpx;
border-radius: 50rpx;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
padding: 0 40rpx;
margin: 15rpx 30rpx 0 30rpx;
.seachIcon {
position: absolute;
right: 50rpx;
width: 32rpx;
height: 32rpx;
}
.searchInput {
color: #111;
}
}
</style>