FE_kd_client/src/components/page/ProjectIntro.vue

<template>
    <div class="wrap">
        <!-- 项目介绍+课前预习 -->
        <div class="nav_wrap">
            <div class="introduce">项目介绍</div>
            <div class="preview" @click="toCourse">课前预习</div>
        </div>
        <!-- 项目介绍文字 -->
        <div class="project_wrap">
            <div class="project_title">{{title}}</div>
            <div class="peoject_content">
                <div class="content_text">{{contentText}}</div>
                <div class="back_index" @click="toIndex"><i class="iconfont icon-home"></i></div>
            </div>
        </div>
        <!-- 选择期权模式（基础+挑战） -->
        <div class="select_wrap">
            <div class="select_item" @click="toNext(0)">
                <div class="icon_one icon_wrap"><i class="iconfont icon-arrowRight"></i></div>
                <div class="select_title one_title">期权套期保值实验</div>
            </div>
            <div class="select_item" @click="toNext(1)">
                <div class="icon_two icon_wrap"><i class="iconfont icon-arrowRight"></i></div>
                <div class="select_title two_title">期权组合保险实验</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
          title:'期权交易虚仿实验',
          contentText:'本项目构建了面向实战的期权交易场景，让学生面对实际存在的农业生产相关问题，设计交易策略。分为期权套期保值实验和期权组合保险实验，期权套期保值实验为单一期权的实验，需利用一个期权合约对现货进行套期保值；期权组合保险实验为期货期权组合的实验，需利用多个期权的组合满足较为复杂的套期保值需求。'
        };
    },
    mounted(){
     
    },
    methods: {
        toIndex() {
            this.$router.push('dashboard')
        },
        toCourse() {
            this.$router.push('dashboard#1')
        },
        toNext(index) {
            this.$router.push(`ProjectPattern?pattern=${index}`)
        },
    },
};
</script>
<style lang="scss" scoped>
.wrap{
    width: 100%;
    height: 100%;
    position: fixed;
    background: url('../../assets/img/introBg.jpg') no-repeat;
    background-size: 100% 100%;
}
.nav_wrap{
    height: 50px;
    display: flex;
    justify-content: center;
    color: white;
    .introduce{
        background: #004590;
    }
    div{
        width: 200px;
        line-height: 50px;
        text-align: center;
        font-size: 26px;
        cursor: pointer;
    }
    div:hover{
        opacity: 0.8;
    }
    .preview{
        background: #FF5288;
    }
}
.project_wrap{
        width: 100%;
        padding-left: 250px;
        box-sizing: border-box;
    .project_title{
        height: 80px;
        margin-top: 70px;
        font-size: 65px;
        letter-spacing:12px;
        color: #FF5288;
        font-weight: 600;
    }
    .peoject_content{
        height: 500px;
        margin-top: 20px;
        // background: red;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content_text{
            letter-spacing:2px;
            width: 1100px;
            height: 500px;
            background: white;
            padding: 100px 90px;
            box-sizing: border-box;
            color: #242323;
            line-height: 60px;
            font-size: 28px;
            font-weight: 60;
            font-family: '微软雅黑';
        }
        .back_index{
            width: 80px;
            height: 80px;
            background: white;
            text-align: center;
            .icon-home{
                font-size: 50px;
                color: #FF5288;
                font-weight: 600;
                line-height: 80px;
            }
        }
        .back_index:hover{
            // background: #3f7ecc;
            opacity: 0.8;
            cursor: pointer;
        }
    }
   
}
.select_wrap{
    // margin-left: 10px;
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    .select_item{
        width: 350px;
        display: flex;
        cursor: pointer;
        .icon_wrap{
            width: 60px;
            height: 60px;
            text-align: center; 
            margin-right: 20px;
        }
        .select_title{
            font-size: 27px;
            line-height: 60px;
            letter-spacing:3px;
            font-weight: 600;
        }
        .one_title{
            color: #004590;
        }
        .two_title{
            color: white;
        }
        .icon_one{
            background: #004590;
        }
        .icon_two{
            background: #FF5288;
        }
    }
    .select_item:hover{
        opacity: 0.8;
    }
}
.icon-arrowRight{
    font-size: 50px;
    color: white;
    line-height: 60px;
}
</style>