CocoClass-help/components/Search.vue

<template>
    <div class="search">
        <h3>您好，需要提供什么帮助？</h3>
        <div :class="searchChangeClass ? 'search-input searchChangeClass' : 'search-input'">
            <el-input placeholder="请输入关键词，如课程、协同、AI" v-model="input" size="large" @input="searchChange" @blur="searchChangeClass = false" @focus="searchChange"></el-input>
            <img :src="Enlarge" alt="放大">
            <p>搜索推荐：课程、协同、项目、登录、AI助手</p>
            <ul v-if="searchChangeClass" class="search-list">
                <li>课程创建</li>
                <li>学习新课程案例</li>
                <li>课程创建</li>
                <li>学习新课程案例</li>
                <li>课程创建</li>
                <li>学习新课程案例</li>
                <li>课程创建</li>
                <li>学习新课程案例</li>
            </ul>
        </div>
    </div>
</template>
<script>
import Enlarge from '../assets/img/enlarge.png'

export default {
    data() {
        return {
            input: '',
            Enlarge,
            searchChangeClass: false
        }
    },
    methods: {
        searchChange() {
            if (this.input) {
                this.searchChangeClass = true
            }else{
                this.searchChangeClass = false
            }
        }
    },
}
</script>
<style lang="less">
.search {
    h3 {
        margin-top: 80px;
        color: #1A4289;
        font-size: 2rem;
        font-weight: 600;
        display: inline-block;
    }

    .searchChangeClass {

        box-shadow: 0px 4px 10px 10px #1D398314;
        border-top-left-radius: 26px;
        border-top-right-radius: 26px;

        .el-input {
            border-bottom: 1px solid #E2EEFF;
            .el-input__wrapper,
            .is-foucs {
                border: none !important;
                border-bottom-left-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                box-shadow: none;
            }

            .el-input__wrapper:hover {

                border: none !important;
            }
        }
    }

    .search-input {
        margin-top: 20px;
        // padding: 15px 22px;
        width: 385px;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
        text-align: left;

        img {
            position: absolute;
            width: 16px;
            left: 20px;
            top: 32%;
            transform: translateY(-50%);
        }

        .el-input {

            .el-input__wrapper {
                border: 1px solid #AECCFE;
                border-radius: 26px;

                input {
                    padding-left: 20px;
                }
            }
        }

        p {
            margin-top: 10px;
            padding-left: 20px;
            color: #41506d;
            font-size: 12px;
        }

        .search-list {
            width: 100%;
            position: absolute;
            top: 42px;
            border-bottom-left-radius: 15px;
            border-bottom-right-radius: 15px;
            background-color: rgba(255, 255, 255, 1);
            padding: 10px 15px;
            box-shadow: 0px 4px 8px 8px #1D398314;

            li {
                padding: 8px 4px;
                font-size: 14px;
                cursor: pointer;
            }
            li:hover{
                background-color: rgba(235, 235, 235, 1);
                border-radius: 5px;
            }
        }
    }
}
</style>