choujiang/pagesB/search/search.vue

<template>
    <view>
        <statusNav returnColor="#141414" fontWeight="800" titleColor="#141414" backgroudColor="#ffffff"
            navBarTitle="积分商城">
        </statusNav>
        <view class="search-input">
            <input class="input" @input="isInputFun()" v-model="inputValue" type="text" value="" placeholder="输入商品名称" />
            <view class="text">
                取消
            </view>
        </view>
        <view class="search-main">
            <view v-if="isInput">
                <view class="hot">
                    <view class="title">
                        历史搜索
                    </view>
                    <view class="hot-content">
                        <view class="li" v-for="(item,index) in 6">
                            生活用品
                        </view>
                    </view>
                </view>
                <view class="hot">
                    <view class="title">
                        热门搜索
                    </view>
                    <view class="hot-content">
                        <view class="li" v-for="(item,index) in 6">
                            生活
                        </view>
                    </view>
                </view>
            </view>
            <view class="search-list" v-if="!isInput">
                <view class="nav">
                    <view class="li on">
                        <view class="">
                            综合
                        </view>
                    </view>
                    <view class="li">
                        <view class="">
                            价格
                        </view>
                    </view>
                    <view class="li">
                        <view class="">
                            销量
                        </view>
                    </view>
                </view>
                <view class="mall">
                    <view class="li" v-for="(item,index) in 6">
                        <image src="" class="img" mode=""></image>

                        <view class="name">
                            现金红包666元独宠一人
                        </view>
                        <view class="num">
                            ￥30.00+20积分
                        </view>
                    </view>
                </view>

            </view>


        </view>
        </view>
</template>

<script>
    import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
    import statusNav from '../../components/status-nav.vue';
    export default {
        components: {
            footTabOne,
            statusNav
        },
        data() {
            return {
                isInput: true,
                inputValue: ""
            }
        },
        methods: {
            isInputFun() {
                if (this.inputValue) {
                    this.isInput = false
                } else {
                    this.isInput = true
                }
            }
        }
    }
</script>

<style>
    /*    page {
        background-color: #F5F5F5;
    }
 */
    .search-input {
        display: flex;
        align-items: center;
        padding: 30rpx 30rpx;
        background-color: #FFFFFF;

    }

    .search-input .input {
        width: 612rpx;
        height: 72rpx;
        font-size: 28rpx;
        padding-left: 36rpx;
        box-sizing: border-box;
        border-radius: 10rpx;
        background-color: rgba(236, 236, 236, 100);
    }

    .search-input .text {
        color: rgba(113, 113, 113, 100);
        font-size: 28rpx;
        margin-left: 22rpx;
    }

    .search-main {}

    .search-main .hot {
        margin-bottom: 20rpx;
        padding: 0 30rpx;
    }

    .search-main .hot .title {
        font-size: 32rpx;
        color: rgba(16, 16, 16, 100);
        margin-bottom: 20rpx;
    }

    .hot-content {
        display: flex;
        flex-wrap: wrap;
    }

    .hot-content .li {
        color: rgba(113, 113, 113, 100);
        font-size: 28rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        padding: 12rpx 24rpx;
        background-color: rgba(236, 236, 236, 100);
        text-align: center;
    }

    .search-list {}

    .search-list .nav {
        display: flex;
        justify-content: space-between;
        padding: 0rpx 60rpx;
        padding-bottom: 32rpx;
        background-color: #FFFFFF;
    }

    .search-list .nav .on {
        font-size: 28rpx;
        color: #F37A61;
    }

    .mall {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 30rpx;
        background-color: #F5F5F5;
        padding-top: 20rpx;
    }

    .mall .li {
        width: 340rpx;
        height: 440rpx;
        border-radius: 20rpx;
        margin-bottom: 22rpx;
        margin-bottom: 22rpx;
        box-shadow: 0px 0px 12rpx 0px rgba(0, 0, 0, 0.1);
    }

    .mall .li .img {
        background-color: rgba(236, 236, 236, 100);
        width: 100%;
        height: 310rpx;
        border-radius: 20rpx 20rpx 0px 0px;
    }

    .mall .li .name {
        color: rgba(16, 16, 16, 100);
        font-size: 28rpx;
        padding: 14rpx 14rpx;
        font-family: PingFangSC-regular;
    }

    .mall .li .num {
        color: rgba(243, 122, 97, 100);
        font-size: 28rpx;
        padding: 0 14rpx;
        font-weight: normal;
    }
</style>