|
|
@@ -1,14 +1,87 @@
|
|
|
<template>
|
|
|
- <view>chart</view>
|
|
|
+ <view class="chart-page">
|
|
|
+ <van-sticky style="background: #fff">
|
|
|
+ <view class="flex search-wrap">
|
|
|
+ <van-search
|
|
|
+ shape="round"
|
|
|
+ :value="searchVal"
|
|
|
+ placeholder="图表名称搜索"
|
|
|
+ @change="searchValChange"
|
|
|
+ @search="onSearch"
|
|
|
+ @clear="onClearSearch"
|
|
|
+ style="flex:1"
|
|
|
+ />
|
|
|
+ <image
|
|
|
+ src="../../static/chart/menu.png"
|
|
|
+ mode="widthFix"
|
|
|
+ class="menu-icon"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </van-sticky>
|
|
|
+ <view class="flex chart-list">
|
|
|
+ <view class="chart-item" v-for="item in 6" :key="item">
|
|
|
+ <view class="title">标题</view>
|
|
|
+ <image class="img" src="" mode="aspectFill"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
- onLoad(){
|
|
|
- }
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ }
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style>
|
|
|
-
|
|
|
+<style lang="scss">
|
|
|
+.chart-page {
|
|
|
+ min-height: calc(100vh - calc(50px + constant(safe-area-inset-bottom)));
|
|
|
+ min-height: calc(100vh - calc(50px + env(safe-area-inset-bottom)));
|
|
|
+ background-color: #f9f9f9;
|
|
|
+}
|
|
|
+.search-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 30rpx 34rpx;
|
|
|
+ align-items: center;
|
|
|
+ .menu-icon{
|
|
|
+ width: 52rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-left: 30rpx;
|
|
|
+ }
|
|
|
+ .van-search{
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.chart-list{
|
|
|
+ padding: 24rpx 25rpx;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ .chart-item{
|
|
|
+ width: 48.5%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 0px 12rpx rgba(154, 141, 123, 0.16);
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ padding: 20rpx 20rpx 33rpx 20rpx;
|
|
|
+ .title{
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 261rpx;
|
|
|
+ display: block;
|
|
|
+ margin-left: auto;
|
|
|
+ margin-right: auto;
|
|
|
+ background-color: cornsilk;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
