校园-江西科技师范大学-前端
shuishen
2023-12-05 d1472f024ff3b3ef426724359c175a36ee21dc6c
src/components/mobileCortrolSearch/index.vue
@@ -4,20 +4,13 @@
    -->
    <div class="m-left-mobileCortrolSearch">
        <div class="m-left-SearchMain">
            <el-input
                placeholder="请输入内容"
                v-model="input"
                clearable
                size="small"
                class="m-left-S-input"
            >
                <el-button
                    slot="append"
                    class="iconSearch"
                    icon="el-icon-search icon"
                    @click="search"
                ></el-button>
            </el-input>
            <slot name="selectCampusBox"></slot>
            <div class="m-left-input-box">
                <el-input placeholder="请输入内容" v-model="input" clearable size="small" class="m-left-S-input">
                    <el-button slot="append" class="iconSearch" icon="el-icon-search icon" @click="search"></el-button>
                </el-input>
            </div>
        </div>
    </div>
</template>
@@ -52,31 +45,73 @@
.m-left-mobileCortrolSearch {
    width: 100%;
    position: fixed;
    top: 0;
    top: 10px;
    // left: 20px;
    z-index: 200;
    .m-left-SearchMain {
        margin: 0 auto;
        width: 60%;
        margin: 0 2%;
        width: 96%;
        position: relative;
        z-index: 1;
        top: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        .m-left-input-box {
            flex: 1;
            ::v-deep(input) {
                border-radius: 0 !important;
                border: none !important;
                background-color: #f1f1f1;
            }
        }
        &>div:first-child {
            border-radius: 4px 0 0 4px !important;
            .m-left-S-input {
                border-radius: 4px 0 0 4px !important;
                ::v-deep(input) {
                    border-radius: 4px 0 0 4px !important;
                }
            }
        }
        .m-left-S-input {
            border: none;
            font-size: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            ::v-deep(input) {
                flex: 1 !important;
            }
            ::v-deep(.el-input-group__append) {
                width: 0 !important;
                border: none !important;
                border-radius: 0 !important;
                button {
                    border-radius: 0 4px 4px 0 !important;
                }
            }
        }
        .iconSearch {
            width: 30px;
            height: 30px;
            width: 32px;
            height: 32px;
            padding-top: 0;
            padding-bottom: 0;
            background-color: rgb(33, 150, 243);
            display: flex;
            align-items: center;
            justify-content: center;
            border: none !important;
            font-size: 24px;
            color: #fff;
        }