2024/03/27（2024春季）（结对作业）

今日学习时长：2小时

代码行数：172行

博客数量：1篇

今日主要是和我的结对搭档贾建超讨论了一下有关于结对作业的一些构思，包括页面的设计和数据的存储方式等。方便以后作业的进行。

 

<script lang="ts" setup>
import { ref } from 'vue'
const isTrans = ref(true)
const isLoad = ref(false)
const isStation = ref(false)

const transselect = () => {
    isTrans.value = true;
    isLoad.value = false;
    isStation.value = false;
}
const loadselect = () => {
    isTrans.value = false;
    isLoad.value = true;
    isStation.value = false;
}
const stationselect = () => {
    isTrans.value = false;
    isLoad.value = false;
    isStation.value = true;
}

const inputTransStation = ref({ startplace: '', endplace: '' })
const line = ref()
const station = ref()



</script>



<template>
    <el-card>
        <template #header>
            <div class="card-header">
                <span>
                    <h1>北京地铁查询系统</h1>
                </span>
            </div>
        </template>

        <div class="transdiv" ref="form">
            <el-container class="layout-container-demo" style="height: 500px">
                <el-aside width="200px">
                    <el-menu>
                        <el-menu-item-group>
                            <el-menu-item @click="transselect">换乘查询</el-menu-item>
                            <el-menu-item @click="loadselect">线路查询</el-menu-item>
                            <el-menu-item @click="stationselect">站点查询</el-menu-item>
                        </el-menu-item-group>
                    </el-menu>
                </el-aside>
                <el-main>
                    <div v-if="isTrans" ref="form">
                        <el-form :inline="true" class="select-main">
                            <el-form-item label="起点：">
                                <el-input v-model="inputTransStation.startplace" placeholder="请输入起点名称" clearable />
                            </el-form-item>
                            <el-form-item label="终点：">
                                <el-input v-model="inputTransStation.endplace" placeholder="请输入终点名称" clearable />
                            </el-form-item>
                            <br>
                            <el-form-item label="起始站：">
                                <el-select placeholder="站点分类">
                                    <el-option label="A" value="a"></el-option>
                                    <el-option label="B" value="b"></el-option>
                                </el-select>
                                &nbsp;
                                <el-select placeholder="站点名称" v-model="inputTransStation.startplace">
                                    <el-option label="A" value="a"></el-option>
                                    <el-option label="B" value="b"></el-option>
                                </el-select>
                            </el-form-item>
                            <br>
                            <el-form-item label="终点站：">
                                <el-select placeholder="站点分类">
                                    <el-option label="A" value="a"></el-option>
                                    <el-option label="B" value="b"></el-option>
                                </el-select>
                                &nbsp;
                                <el-select placeholder="站点名称" v-model="inputTransStation.endplace">
                                    <el-option label="A" value="a"></el-option>
                                    <el-option label="B" value="b"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>


                    <div v-if="isLoad" ref="form">
                        <el-form :inline="true" class="select-main">
                            <el-form-item label="线路查询：">
                                <el-input v-model="line" placeholder="请输入线路名称，如“线路一”"></el-input>
                            </el-form-item>
                            <br>
                            <el-form-item label="线路查询：">
                                <el-select placeholder="请选择线路" v-model="line">
                                    <el-option label="线路一" value="shanghai"></el-option>
                                    <el-option label="线路二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>



                    <div v-if="isStation" ref="form">
                        <el-form :inline="true" class="select-main">
                            <el-form-item label="站点查询：">
                                <el-input v-model="station" placeholder="请输入站点名称，如“鹤岗”"></el-input>
                            </el-form-item>
                            <br>
                            <el-form-item label="站点分类：">
                                <el-select placeholder="请选择">
                                    <el-option label="A" value="a"></el-option>
                                    <el-option label="B" value="b"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="站点名称：" >
                                <el-select placeholder="请选择" v-model="station">
                                    <el-option label="JJJJ" value="a"></el-option>
                                    <el-option label="BBBBB" value="b"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>


                </el-main>
            </el-container>
        </div>
    </el-card>



</template>




<style scoped>
.el-p {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.select-main .el-input {
    --el-input-width: 220px;
}

.select-main .el-select {
    --el-select-width: 220px;
}


.card-header {
    display: flex;
    justify-content: space-between;
}
</style>