el-input 样式设置

<!--

 * @Description:

 * @Author: wwf

 * @Date: 2022-05-18 14:42:31

 * @LastEditTime: 2022-05-18 16:28:31

 * @LastEditors: wwf

-->

<template>

    <div class="GlobalSeach">

        <div class="GlobalSeachInput">

            <el-input v-model="inputValue" placeholder="搜索" clearable />

        </div>

        <div class="search">搜索</div>

    </div>

</template>

<script lang="ts">

import { defineComponent, reactive, toRefs } from 'vue'

import { ref } from 'vue'

export default defineComponent({

    name: '',

    setup() {

        const inputValue = ref('')

        const state = reactive({})

        return {

            ...toRefs(state),

            inputValue

        }

    }

})

</script>

<style scoped lang="scss">

.GlobalSeach {

    width: 382px;

    height: 54px;

    background: url('../../assets/top/search.png') no-repeat;

    position: absolute;

    top: 95px;

    left: 29px;

    display: flex;

    justify-content: flex-start;

    align-content: center;

    .GlobalSeachInput {

        width: 310px;

        margin-left: 10px;

    }

    .search {

        width: 50px;

        height: 36px;

        line-height: 36px;

        text-align: center;

        background-color: #2fbbe1;

        font-size: 14px;

        font-family: SourceHanSansCN-Normal, SourceHanSansCN;

        font-weight: 400;

        color: #ffffff;

        opacity: 0.85;

        margin-top: 9px;

        cursor: pointer;

    }

    ::v-deep .el-input__wrapper {

        --el-input-inner-height: calc(var(--el-input-height) - 2px);

        display: inline-flex;

        flex-grow: 1;

        align-items: center;

        justify-content: center;

        padding: 1px 11px;

        background-color: rgba(21, 43, 56, 0.65);

        background-image: none;

        border-radius: 0;

        margin-top: 9px;

        border: none !important;

        border-color: rgba(21, 43, 56, 0.65) !important;

        box-shadow: 0 0 0 1px rgba(21, 43, 56, 0.65);

    }

    ::v-deep .el-input__inner {

        width: 100%;

        height: 34px;

        flex-grow: 1;

        -webkit-appearance: none;

        font-size: inherit;

        line-height: var(--el-input-inner-height);

        padding: 0;

        outline: 0;

        border: none !important;

        // background: 0 0;

        box-sizing: border-box;

        color: #dbe1e3 !important;

    }

    // :deep(.el-input__inner) {

    //     height: 36px;

    //     background: linear-gradient(360deg, rgba(22, 208, 255, 0.26) 0%, rgba(2, 51, 64, 0.19) 100%) !important;

    //     color: #dbe1e3 !important;

    //     // border: 1px solid rgba(21, 43, 56, 1) !important;

    //     border: none !important;

    // }

    :deep(.el-input__icon) {

        color: #3eeff2 !important;

        cursor: pointer;

    }

}

</style>