FE_kd_client/src/components/page/ProjectPattern.vue

<template>
    <div class="wrap">
        <div class="content_one">
            <div class="content_one_title">
                {{projectList[pattern].title}}
            </div>
            <div class="content_one_text">
                <div class="principle_wrap">
                    <div class="one_title">实验原理：</div>
                    <div class="one_text">
                        {{projectList[pattern].principle}}
                    </div>
                </div>
                <div class="step_wrap">
                    <div class="one_title">实验步骤：</div>
                    <div class="one_text">
                        {{projectList[pattern].step}}
                    </div>
                </div>
                <div class="prepare_wrap">
                    <div class="one_title">实验准备：</div>
                    <div class="one_text">
                        {{projectList[pattern].prepare}}
                    </div>
                </div>
            </div>
            <div class="pattern_wrap">
            <div class="img_wrap" @click="core.toSubSystem('')">
                <div><img src="../../assets/img/buttonOne.png" alt=""></div>
                <div>练习模式</div>
            </div>
            <div class="img_wrap" @click="toNext(4)">
                <div><img src="../../assets/img/buttonTwo.png" alt=""></div>
                <div>考核模式</div>
            </div>
            <div class="img_wrap" @click="toNext(5)">
                <div><img src="../../assets/img/buttonThree.png" alt=""></div>
                <div>实验记录</div>
            </div>
        </div>
        </div>
        
    </div>
</template>
<script>
export default {
    data() {
        return {
            pattern: this.$route.query.pattern,
            projectList:[{
                title:'期权套期保值实验',
                url:'http://122.9.154.146/kd/#/Dashboard',
                principle:'本实验根据《期货、期权及其它衍生品》等理论课程的大纲要求，将期权基础知识考核、期权实战规则、模拟开户和期权策略设计等内容融会贯通于十个步骤，考察学生利用期权策略减少价格波动对企业经营影响的能力。',
                step:'1. 试验背景介绍；2. 期权实战规则；3. 模拟开户；4. 银期转账；5. 试验角色选择；6. 行情查看与期权选择；7. 期权开仓；8. 期权平仓；9. 核算损益；10. 填写实验报告',
                prepare:'完成此实验前，应该了解期货期权的相关定义、期权的交易规则、期权交易的核算规则等相关知识点。'
            },{
                title:'期权组合保险实验',
                url:'http://122.9.154.146/kdChallenge/#/Dashboard',
                principle:'本实验根据《期货、期权及其它衍生品》等理论课程的大纲要求，将期权delta风险中性策略、交叉对冲和期权组合策略设计等知识点融会贯通于十个步骤，考察学生利用期权组合策略减少价格波动对企业经营影响的能力。',
                step:'1.关于delta动态调仓的实验背景；2.关于交叉对冲的实验背景；3.实验案例；4.最优对冲比率计算；5.合约选择；6.期权组合开仓；7.期权组合调仓；8.期权组合平仓；9.核算损益；10.填写实验报告；',
                prepare:'开始实验前，应了解期权定义、期权交易规则、希腊字母delta、交叉对冲和不同期权组合策略的盈亏图。'
            }],

        };
    },
    mounted(){
        this.patternId = this.$route.query.type
    },
    methods: {
        toNext(index) {
            this.$store.commit("patternData",{pattern: this.pattern});
            this.$router.push(`dashboard#${index}`)
        },
    },
};
</script>
<style lang="scss" scoped>

.wrap{
    width: 100%;
    height: 100%;
    display: flex;
    font-family: '微软雅黑';
}
.content_one{
    // margin-top: 60px;
    width: 100%;
    height: 900px;
    // background: red;
    background: url('../../assets/img/content.jpg');
    background-size: 100% 100%;
    .content_one_title{
        width: 100%;
        height: 130px;
        line-height: 130px;
        text-align: center;
        font-size: 50px;
        letter-spacing:8px;
        font-weight: 550;
        color: white;
    }
}
.one_title{
    width: 280px;
    height: 40px;
    line-height: 40px;
    font-size: 25px;
    color: #FF5288;
    letter-spacing:4px;
    padding-left: 100px;
    box-sizing: border-box;
    font-weight: 550;
    border-radius: 0px 20px 20px 0px;
    background: white;
}
.one_text{
    width: 900px;
    height: 200px;
    padding: 45px 60px;
    box-sizing: border-box;
    // background: red;
    font-size: 23px;
    line-height: 1.5;
    color: white;
    letter-spacing:2px;
    font-weight: 60;
}
.pattern_wrap{
    width: 100%;
    // height: 150px;
    // background: red;
    border-top: 2px solid #FF5288;
    padding: 0px 100px;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    margin-top: 80px;
    .img_wrap{
        margin-top: 30px;
        width: 500px;
        height: 380px;
        text-align: center;
        box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75);
        -webkit-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75);
        -moz-box-shadow: -2px 6px 10px -4px rgba(136,80,98,0.75);
        margin-bottom: 80px;
        font-size: 23px;
        color: #FF5288;
        font-weight: 550;
        letter-spacing:3px;
    }
    .img_wrap:hover{
        box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75);
        -webkit-box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75);
        -moz-box-shadow: -2px 6px 10px -6px rgba(136,80,98,0.75);
        img{
            opacity: 0.9;
            
        }
    }
    img{
        width: 400px;
        height: 320px;
    }
}
</style>