|
|
@@ -1,243 +0,0 @@
|
|
|
-<template>
|
|
|
- <!-- 原理认知 -->
|
|
|
- <view class="myComRoot ylrz-box df fdr">
|
|
|
- <!-- 左边导航栏 -->
|
|
|
- <view class="leftBox">
|
|
|
- <view class="df fdc leftMenu" v-for="(menu1,i) in btnList" :key="i">
|
|
|
- <view class="leftMenu-btn1 df fdr aic jcsb" @click="onLeftBtn1Click(i)">
|
|
|
- <view class=" df fdr aic ">
|
|
|
- <view class="leftMenu-btn1-icon df">
|
|
|
- <img :src="menu1.icon_btn1_unchecked"></img>
|
|
|
- </view>
|
|
|
- <view class="leftMenu-btn1-text" :style="{color:color_unchecked_01}">{{menu1.text}}</view>
|
|
|
- </view>
|
|
|
- <view class="leftMenu-btn1-arrow df">
|
|
|
- <img :src="arrowSrc"></img>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="leftMenu-btn2-box2 df fdr aic" v-for="(menu2,m) in menu1.list" :key="m" @click="onLeftBtn2Click(i,m)">
|
|
|
- <view class="leftMenu-btn2-icon df">
|
|
|
- <img :src="(checkedIndex1==i&& checkedIndex2==m)?icon_btn2_checked:icon_btn2_unchecked"></img>
|
|
|
- </view>
|
|
|
- <view class="leftMenu-btn2-text" :style="{color:(checkedIndex1==i&& checkedIndex2==m)?color_checked:color_unchecked_02}">{{menu2}}</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <!-- 右边详情页 -->
|
|
|
- <view class="rightBox">
|
|
|
- <!-- 学习知识点 -->
|
|
|
- <view class="right-content df fdc" v-show="checkedIndex1==0">
|
|
|
- <view v-for="(content,n) in myData_YLRZ_ZSD[checkedIndex2].content" :key="n">
|
|
|
- <view class="right-title df aic" v-show="content.type=='title'">
|
|
|
- <view class="right-title-line"></view>
|
|
|
- <view class="right-title-text">{{content.details}}</view>
|
|
|
- </view>
|
|
|
- <view class="right-text" v-show="content.type=='text'">{{content.details}}</view>
|
|
|
- <view class="right-pic df" v-show="content.type=='pic'">
|
|
|
- <img :src="content.src"></img>
|
|
|
- </view>
|
|
|
- <view class="right-space" v-show="content.type=='space'"></view>
|
|
|
- </view>
|
|
|
- <view class="df jcc">
|
|
|
- <view class="right-btn-next df aic jcc" @click="onClick_next">下一步</view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- isShow: false,
|
|
|
- checkedIndex1: 0,
|
|
|
- checkedIndex2: 0,
|
|
|
-
|
|
|
- // ------以下为静态
|
|
|
- arrowSrc: require('../../../../assets/learning/icon_ylrz_arrow.png'),
|
|
|
- btnList: [{
|
|
|
- "text": '学习知识点',
|
|
|
- "icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
|
|
|
- "icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
|
|
|
- "list": ['课程地图及知识点位置', '知识点:虚拟纸片流程:', '知识点:虚拟引擎', '知识点:影视现场实时特效']
|
|
|
- },
|
|
|
- {
|
|
|
- "text": '测验(完成获得10分)',
|
|
|
- "icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
|
|
|
- "icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
|
|
|
- "list": ['测验']
|
|
|
- },
|
|
|
- {
|
|
|
- "text": '结论',
|
|
|
- "icon_btn1_checked": require('../../../../assets/learning/icon_ylrz_menu_02.png'),
|
|
|
- "icon_btn1_unchecked": require('../../../../assets/learning/icon_ylrz_menu_01.png'),
|
|
|
- "list": ['结论']
|
|
|
- }
|
|
|
- ],
|
|
|
- icon_btn2_checked: require('../../../../assets/learning/icon_ylrz_menu_02.png'),
|
|
|
- icon_btn2_unchecked: require('../../../../assets/learning/icon_ylrz_menu_01.png'),
|
|
|
- color_checked: '#EA252C',
|
|
|
- color_unchecked_01: '#070707', //1级菜单
|
|
|
- color_unchecked_02: '#555555', //2级菜单
|
|
|
- myData_YLRZ_ZSD: [
|
|
|
- YLRZ_ZSD_01,
|
|
|
- YLRZ_ZSD_02,
|
|
|
- YLRZ_ZSD_03,
|
|
|
- YLRZ_ZSD_04
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- initData() {
|
|
|
- // this.checkedIndex1 = 0;
|
|
|
- // this.checkedIndex2 = 0;
|
|
|
- },
|
|
|
- onLeftBtn1Click(index) {
|
|
|
- if (index != this.checkedIndex1) {
|
|
|
- this.checkedIndex2 = 0;
|
|
|
- this.checkedIndex1 = index;
|
|
|
- }
|
|
|
- },
|
|
|
- onLeftBtn2Click(index1, index2) {
|
|
|
- this.checkedIndex1 = index1;
|
|
|
- this.checkedIndex2 = index2;
|
|
|
- },
|
|
|
- onClick_next() {
|
|
|
- if (this.checkedIndex2 < this.btnList[this.checkedIndex1].list.length - 1) {
|
|
|
- this.checkedIndex2 += 1;
|
|
|
- } else {
|
|
|
- if (this.checkedIndex1 + 1 < this.btnList.length) {
|
|
|
- this.checkedIndex1 += 1;
|
|
|
- this.checkedIndex2 = 0;
|
|
|
- } else {
|
|
|
- // 先空着
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
- .ylrz-box {
|
|
|
- background: #F4F4F4;
|
|
|
- }
|
|
|
-
|
|
|
- .leftBox {
|
|
|
- background-color: #FFFFFF;
|
|
|
- width: px2vw(374);
|
|
|
- height: 100%;
|
|
|
- box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin-top: px2vw(11);
|
|
|
- }
|
|
|
-
|
|
|
- .rightBox {
|
|
|
- flex: 1;
|
|
|
- height: 100%;
|
|
|
- background: #FFFFFF;
|
|
|
- box-shadow: px2vw(3) 0px px2vw(6) 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin-top: px2vw(11);
|
|
|
- margin-left: px2vw(11);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn1 {
|
|
|
- width: 100%;
|
|
|
- height: px2vw(70);
|
|
|
- background: #F2F2F2;
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn1-icon {
|
|
|
- margin-left: px2vw(38);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn1-icon img {
|
|
|
- width: px2vw(18);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn1-text {
|
|
|
- margin-left: px2vw(14);
|
|
|
- font-size: px2vw(20);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn2-box1 {
|
|
|
- margin-top: px2vw(30);
|
|
|
- margin-bottom: px2vw(30);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn2-box2 {
|
|
|
- margin-left: px2vw(48);
|
|
|
- margin-top: px2vw(25);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn2-text {
|
|
|
- margin-left: px2vw(14);
|
|
|
- font-size: px2vw(20);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn2-icon img {
|
|
|
- width: px2vw(16);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn1-arrow {
|
|
|
- margin-right: px2vw(38);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu-btn1-arrow img {
|
|
|
- width: px2vw(15);
|
|
|
- }
|
|
|
-
|
|
|
- .leftMenu {
|
|
|
- margin-bottom: px2vw(25);
|
|
|
- }
|
|
|
-
|
|
|
- .right-content {
|
|
|
- margin-top: px2vw(40);
|
|
|
- margin-left: px2vw(50);
|
|
|
- margin-bottom: px2vw(40);
|
|
|
- margin-right: px2vw(50);
|
|
|
- }
|
|
|
-
|
|
|
- .right-title {}
|
|
|
-
|
|
|
- .right-title-line {
|
|
|
- width: px2vw(8);
|
|
|
- height: px2vw(24);
|
|
|
- background: #EA252C;
|
|
|
- }
|
|
|
-
|
|
|
- .right-title-text {
|
|
|
- font-size: px2vw(24);
|
|
|
- margin-left: px2vw(23);
|
|
|
- color: #070707;
|
|
|
- }
|
|
|
-
|
|
|
- .right-text {
|
|
|
- font-size: px2vw(22);
|
|
|
- color: #020202;
|
|
|
- line-height: px2vw(46);
|
|
|
- margin-top: px2vw(40);
|
|
|
- }
|
|
|
-
|
|
|
- .right-space {
|
|
|
- margin-top: px2vw(50);
|
|
|
- }
|
|
|
-
|
|
|
- .right-pic {
|
|
|
- margin-top: px2vw(40);
|
|
|
- }
|
|
|
-
|
|
|
- .right-pic img {
|
|
|
- max-width: px2vw(1397);
|
|
|
- }
|
|
|
-
|
|
|
- .right-btn-next {
|
|
|
- width: px2vw(200);
|
|
|
- height: px2vw(58);
|
|
|
- background: #EA252C;
|
|
|
- border-radius: px2vw(8);
|
|
|
- margin-top: px2vw(60);
|
|
|
- font-size: px2vw(24);
|
|
|
- color: #FFFFFF;
|
|
|
- }
|
|
|
-</style>
|