Knowledge_Test_Vue/src/views/TestView.vue

<template>
    <div class="home">
        <div class="top">
            <span>
                <h1>📈股票知识评测系统</h1>
            </span>
            <p>全方面评估您的股票投资知识水平，获取个性化学习建议</p>
        </div>
        <div class="content">
            <div class="block">
                <div class="schedule"></div>
            </div>
            <div class="text">
                <div class="question">1、以下哪项不是股票的基本特征？</div>
                <div class="options">
                    <label class="option">
                        <input type="radio" name="answer1" value="A">
                        <span class="label">A. 收益性</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer1" value="B">
                        <span class="label">B. 风险性</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer1" value="C">
                        <span class="label">C. 流动性</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer1" value="D">
                        <span class="label">D. 固定性</span>
                    </label>
                </div>
            </div>
            <div class="text">
                <div class="question">2、以下哪项不是股票的基本特征？</div>
                <div class="options">
                    <label class="option">
                        <input type="radio" name="answer2" value="A">
                        <span class="label">A. 收益性</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer2" value="B">
                        <span class="label">B. 风险性</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer2" value="C">
                        <span class="label">C. 流动性</span>
                    </label>
                    <label class="option">
                        <input type="radio" name="answer2" value="D">
                        <span class="label">D. 固定性</span>
                    </label>
                </div>
            </div>
            <div>
                <button onclick="nextPage" class="nextpage">下一页 -></button>
            </div>
        </div>
        <div class="right">
            <div class="hour">

            </div>
            <div class="all">

            </div>
            <div class="statistics">

            </div>
        </div>
    </div>
</template>
<script>

</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* background-color: #24293c; */
}
.home{
    min-height: 100vh;
    width: 100%;
    background-color: #24293c;
    overflow:auto;
}
.top{
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
    color: white;
    padding: 30px;
    margin-bottom: 30px;
    /* box-shadow: 0 10px 30px rgba(0,0,0,0.3); */
    position: relative;
    overflow: hidden;
}
h1,p{
    background: linear-gradient(135deg, #0c4a6e 0%, #075985 100%);
}
.block {
    background: rgba(139, 141, 145, 0.7);
    width: 90%;
    height: 10px;
    border-radius: 5px;
    margin:auto;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}
.schedule{
    background: linear-gradient(90deg, #0ea5e9 0%, #38bdf8 100%);
    height: 100%;
    width: 15%;
    transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}
.content{
    float: left;
    height: 100%;
    width: 60%;
    border: #183954 solid 2px;
    border-radius: 10px;
    color: #f1f5f9;
    padding: 20px 40px 50px;
    margin: 30px;
}
.question{
    font-size: 1.3em;
    line-height: 1.8;
    margin-bottom: 25px;
    color: #f1f5f9;
    font-weight: 500;
}
.option{
    border: #183954 solid 2px;
    border-radius: 10px;
    width: 70%;
    padding: 5px;
    margin: 3px;
}
.options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.text{
    border: #183954 solid 2px;
    border-radius: 10px;
    padding: 20px 40px;
    margin: 30px;
}
.hour,.all,.statistics{
    width: 300px;
    border: #183954 solid 2px;
    border-radius: 10px;
    padding: 5px;
    margin: 3px;
}
.right{
    float: right;
    height: 100%;
    width: 30%;
    border: #183954 solid 2px;
    border-radius: 10px;
    color: #f1f5f9;
    padding: 20px 40px 50px;
    margin: 30px;
}
.nextpage{
    width: 70px;
    height: 30px;
    background-color: #22608b;
    color: #f1f5f9;
    border-radius: 10px;
    border: transparent 0px ;
    margin: 5px;
    float: right;
}
</style>