|
|
@@ -1,6 +1,51 @@
|
|
|
<template>
|
|
|
<view class="container">
|
|
|
- 模板
|
|
|
+ <view class="header-box">
|
|
|
+ <view class="search-box">
|
|
|
+ <u-search
|
|
|
+ v-model="searchForm.keyword"
|
|
|
+ :clearabled="true"
|
|
|
+ bg-color="#E5E5E5"
|
|
|
+ :input-style="searchInputStyle"
|
|
|
+ placeholder="搜索您想要的内容"
|
|
|
+ ></u-search>
|
|
|
+ </view>
|
|
|
+ <view class="tab-box">
|
|
|
+ <u-tabs
|
|
|
+ name="label"
|
|
|
+ :list="searchType"
|
|
|
+ :is-scroll="false"
|
|
|
+ v-model="searchForm.type"
|
|
|
+ @change="onSearchTypeChange"
|
|
|
+ font-size="24"
|
|
|
+ :bold="false"
|
|
|
+ inactive-color="#000000"
|
|
|
+ active-color="#000000"
|
|
|
+ :bar-style="{'background-color': '#2979ff'}"
|
|
|
+ height="50"
|
|
|
+ ></u-tabs>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-box">
|
|
|
+ <view class="list-item-box" v-for="item in list" :key="item.id">
|
|
|
+ <view class="icon-box">
|
|
|
+ <view class="icon" v-if="item.isNew"></view>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view class="title">
|
|
|
+ {{item.title}}
|
|
|
+ </view>
|
|
|
+ <view class="text">
|
|
|
+ 【{{item.type}}】
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="suffix-box">
|
|
|
+ <view class="button">
|
|
|
+ 查看
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -8,6 +53,69 @@
|
|
|
import { ref } from 'vue'
|
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
|
|
|
|
+ const searchInputStyle = {
|
|
|
+ backgroundColor: '#E5E5E5'
|
|
|
+ }
|
|
|
+ const searchType = [
|
|
|
+ {
|
|
|
+ label: '全部',
|
|
|
+ value: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '研究报告',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '继续教育',
|
|
|
+ value: 2
|
|
|
+ },
|
|
|
+ ]
|
|
|
+ const searchForm = ref({
|
|
|
+ keyword: '',
|
|
|
+ type: 0
|
|
|
+ })
|
|
|
+
|
|
|
+ const list = ref([
|
|
|
+ {
|
|
|
+ id: '01',
|
|
|
+ title: '2024年11月关注是中介促成二手住宅市场交易简报',
|
|
|
+ type: '月度成交简报',
|
|
|
+ isNew: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '02',
|
|
|
+ title: '客户需求理解与匹配',
|
|
|
+ type: '精英修炼营',
|
|
|
+ isNew: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '03',
|
|
|
+ title: '2024年11月关注是中介促成二手住宅市场交易简报',
|
|
|
+ type: '月度成交简报',
|
|
|
+ isNew: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '04',
|
|
|
+ title: '客户需求理解与匹配',
|
|
|
+ type: '精英修炼营',
|
|
|
+ isNew: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '05',
|
|
|
+ title: '2024年11月关注是中介促成二手住宅市场交易简报',
|
|
|
+ type: '月度成交简报',
|
|
|
+ isNew: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: '06',
|
|
|
+ title: '客户需求理解与匹配',
|
|
|
+ type: '精英修炼营',
|
|
|
+ isNew: true
|
|
|
+ },
|
|
|
+ ])
|
|
|
+
|
|
|
+ function onSearchTypeChange(val) {}
|
|
|
+
|
|
|
onLoad(() => {
|
|
|
console.log('onLoad')
|
|
|
})
|
|
|
@@ -17,7 +125,78 @@
|
|
|
.container {
|
|
|
height: 100vh;
|
|
|
width: 100vw;
|
|
|
- background-color: $uni-bg-color;
|
|
|
+ background-color: $uni-text-color-inverse;
|
|
|
padding: 0 20rpx;
|
|
|
+
|
|
|
+ .header-box {
|
|
|
+ background-color: $uni-text-color-inverse;
|
|
|
+ @include topMagnet();
|
|
|
+ }
|
|
|
+
|
|
|
+ .search-box {
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ ::v-deep(.u-search) {
|
|
|
+ background-color: #e5e5e5;
|
|
|
+ border-radius: 50rpx;
|
|
|
+
|
|
|
+ .u-action {
|
|
|
+ width: 18%;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ line-height: 50rpx;
|
|
|
+ letter-spacing: 3rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .list-box {
|
|
|
+ .list-item-box {
|
|
|
+ padding: 10rpx;
|
|
|
+ border-bottom: 5rpx solid #E6E6E6;
|
|
|
+ display: flex;
|
|
|
+ .icon-box {
|
|
|
+ width: 3%;
|
|
|
+ padding-top: 10rpx;
|
|
|
+ .icon {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-box {
|
|
|
+ width: 82%;
|
|
|
+ .title {
|
|
|
+ font-size: $uni-title-font-size-3;
|
|
|
+ font-weight: bold;
|
|
|
+ margin-bottom: 5rpx;
|
|
|
+ @include text-overflow()
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ line-height: 40rpx;
|
|
|
+ font-size: $uni-font-size-2;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .suffix-box {
|
|
|
+ width: 15%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .button {
|
|
|
+ color: $uni-text-color-inverse;
|
|
|
+ padding: 3rpx 18rpx;
|
|
|
+ border-radius: $uni-card-border-radius;
|
|
|
+ background-color: $uni-color-primary;
|
|
|
+ font-size: $uni-font-size-4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
