fe-manage/src/views/research/ResearchManage.vue

<!---- 项目调研页面 --->
<template>
    <div class="researchmanage">
        <!-- 搜索框及按钮 -->
        <div class="filter">
            <div class="filterItems">
                <div class="select">
                <a-select
                    v-model:value="projectName"
                    style="width: 270px"
                    placeholder="请输入调研名称"
                    :options="projectNameList"
                    @change="selectProjectName"
                    allowClear
                    showSearch
                ></a-select>
                </div>

                <div class="select">
                <a-select
                    v-model:value="projectName"
                    style="width: 270px"
                    placeholder="请选择状态"
                    :options="projectNameList"
                    @change="selectProjectName"
                    allowClear
                    showSearch
                ></a-select>
                </div>
                <div class="select">
                <!-- <a-date-picker
                    v-model="selectTime"
                    type="date"
                    placeholder="时间"
                    style="width: 270px"
                /> -->
                <a-range-picker
                    v-model:value="value2"
                    separator="至"
                    :placeholder="['开始时间', '结束时间']"
                />
                </div>
            </div>
            <div class="btns">
                <div class="btn btn1">
                <div class="search"></div>
                <div class="btnText">搜索</div>
                </div>
                <div class="btn btn2">
                <div class="search"></div>
                <div class="btnText">重置</div>
                </div>
                <div class="btn btn3" @click="handleOut">
                <div class="search"></div>
                <div class="btnText">创建调研</div>
                </div>
            </div>
        </div>
        <!-- 搜索框及按钮 -->
        <!-- 表格 -->
        <div class="tableBox">
            
        </div>
        <!-- 表格 -->
        <!-- 创建调研 -->
        
        <!-- 创建调研 -->
    </div>
</template>
<script lang="ts">

</script>
<style lang="scss">
    .researchmanage {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        .filter {
            margin-left: 38px;
            margin-right: 38px;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .filterItems {
            display: flex;
            flex-wrap: wrap;
            .select {
                margin-right: 20px;
                margin-bottom: 20px;
            }
            }
            .btns {
            display: flex;
            // flex-wrap: wrap;
            .btn {
                padding: 0px 26px 0px 26px;
                height: 38px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                border: 1px solid rgba(64, 158, 255, 1);
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 14px;
                flex-shrink: 0;
                cursor: pointer;
                .search {
                background-size: 100%;
                }
                .btnText {
                font-size: 14px;
                font-weight: 400;
                color: rgba(64, 158, 255, 1);
                line-height: 36px;
                margin-left: 5px;
                }
            }
            .btn1 {
                .search {
                width: 15px;
                height: 17px;
                background-image: url("../../assets/images/courseManage/search1.png");
                }
            }
            .btn2 {
                .search {
                width: 16px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/reset1.png");
                }
            }
            .btn3 {
                margin-right: 0px;
                .search {
                width: 17px;
                height: 18px;
                background-image: url("../../assets/images/courseManage/add1.png");
                }
            }
            .btn1:hover {
                background: rgba(64, 158, 255, 1);
                .search {
                background-image: url("../../assets/images/courseManage/search0.png");
                }
                .btnText {
                color: #ffffff;
                }
            }
            .btn2:hover {
                background: rgba(64, 158, 255, 1);
                .search {
                background-image: url("../../assets/images/courseManage/reset0.png");
                }
                .btnText {
                color: #ffffff;
                }
            }
            .btn3:hover {
                background: rgba(64, 158, 255, 1);
                .search {
                background-image: url("../../assets/images/courseManage/add0.png");
                }
                .btnText {
                color: #ffffff;
                }
            }
            }
        }
        

    }
</style>