|
|
@@ -53,29 +53,28 @@
|
|
|
|
|
|
<img src="../../assets/home/homeBG.jpg" />
|
|
|
|
|
|
- <video class="myVideo"
|
|
|
+ <!-- <video class="myVideo"
|
|
|
:src="src"
|
|
|
:controls="controls"
|
|
|
preload="auto"
|
|
|
autoplay
|
|
|
loop muted>
|
|
|
- </video>
|
|
|
-
|
|
|
- <!-- <video v-show="os!=='iOS'"
|
|
|
- class="myVideo"
|
|
|
- preload="auto"
|
|
|
- autoplay
|
|
|
- loop muted
|
|
|
- webkit-playsinline="true"
|
|
|
- playsinline="true"
|
|
|
- @loadstart="videoLoadStart"
|
|
|
- @canplaythrough="videoLoaded"
|
|
|
- poster="./images/cover.png"
|
|
|
- ref="videoEle"
|
|
|
- id="android"
|
|
|
- >
|
|
|
- <source :src="src" type="video/mp4">
|
|
|
</video> -->
|
|
|
+ <view class='introVideo'>
|
|
|
+ <video class="myVideo"
|
|
|
+ :src="src">
|
|
|
+ </video>
|
|
|
+ <view class='videoControl'>
|
|
|
+ <!-- <view class='experimentIntro' :class="[bExperimentIntroSelected==1?'experimentIntro-selected':'experimentIntro-noselect']" @click="onClickExperimentIntro">实验简介视频</view>
|
|
|
+ <view class='slice'> / </view>
|
|
|
+ <view class='teachingGuide' :class="[bTeachingGuideSelected==1?'teachingGuide-selected':'teachingGuide-noselect']" @click="onClickTeachingGuide">教学引导视频</view> -->
|
|
|
+ <view :class="[bExperimentIntroSelected==1?'experimentIntro-selected':'experimentIntro-noselect']" @click="onClickExperimentIntro">实验简介视频</view>
|
|
|
+ <view class='slice'> / </view>
|
|
|
+ <view :class="[bteachingGuideSelected==1?'teachingGuide-selected':'teachingGuide-noselect']" @click="onClickTeachingGuide">教学引导视频</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
<!-- <view class = 'theoryLearn' @click="onTheoryLearn()">理论学习</view>
|
|
|
<view class = 'startExperiment' @click="onStartExperiment()">开始实验</view> -->
|
|
|
</view>
|
|
|
@@ -88,7 +87,9 @@
|
|
|
return {
|
|
|
showIndex: -1,
|
|
|
src:'https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/home.MP4?versionId=CAEQDxiBgIDmyO_o0BciIGExNjQ1ZmJkNTVkOTRlMWRhNGRkZjAxNTEzZTMxOTll',
|
|
|
- controls:false,
|
|
|
+ // controls:false,
|
|
|
+ bExperimentIntroSelected:1,
|
|
|
+ bteachingGuideSelected:0,
|
|
|
menu: [{
|
|
|
"title": '虚拟仿真资产库',
|
|
|
"text": '科学实验,是指根据一定目的,运用一定的仪器、设备等物质手'
|
|
|
@@ -186,6 +187,16 @@
|
|
|
};
|
|
|
|
|
|
this.$emit("onStartExperiment_btn");
|
|
|
+ },
|
|
|
+ onClickExperimentIntro(){
|
|
|
+ this.bExperimentIntroSelected=1;
|
|
|
+ this.bteachingGuideSelected=0;
|
|
|
+ this.src='https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/home.MP4?versionId=CAEQDxiBgIDmyO_o0BciIGExNjQ1ZmJkNTVkOTRlMWRhNGRkZjAxNTEzZTMxOTll';
|
|
|
+ },
|
|
|
+ onClickTeachingGuide(){
|
|
|
+ this.bExperimentIntroSelected=0;
|
|
|
+ this.bteachingGuideSelected=1;
|
|
|
+ this.src='https://zhongchuan1.oss-cn-beijing.aliyuncs.com/Video/home.MP4?versionId=CAEQDxiBgIDmyO_o0BciIGExNjQ1ZmJkNTVkOTRlMWRhNGRkZjAxNTEzZTMxOTll';
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -195,11 +206,9 @@
|
|
|
.homeBG {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
- // background-image: url('../../assets/home/homeBG.jpg');
|
|
|
}
|
|
|
|
|
|
.homeBG img {
|
|
|
- // max-width: 100%;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
@@ -234,6 +243,7 @@
|
|
|
justify-content: center;
|
|
|
align-items:center;
|
|
|
|
|
|
+
|
|
|
background-color: #ff0000;
|
|
|
color: #ffffff;
|
|
|
|
|
|
@@ -241,12 +251,6 @@
|
|
|
}
|
|
|
|
|
|
.sy-menu {
|
|
|
- // background-image: url('../../assets/home/homeBG.jpg');
|
|
|
-
|
|
|
- // background-repeat: no-repeat;
|
|
|
- // background-size: cover;
|
|
|
- // background-position: center;
|
|
|
-
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -254,7 +258,6 @@
|
|
|
|
|
|
.sy-menu-box {
|
|
|
position: absolute;
|
|
|
- // background: #FFFFFF;
|
|
|
}
|
|
|
|
|
|
.sy-menu-text {
|
|
|
@@ -380,22 +383,104 @@
|
|
|
margin-top: px2vw(171);
|
|
|
}
|
|
|
|
|
|
- .myVideo{
|
|
|
+ .introVideo{
|
|
|
position: absolute;
|
|
|
|
|
|
- left: px2vw(770);
|
|
|
- top: px2vw(371);
|
|
|
+ left: px2vw(24);
|
|
|
+ top: px2vw(154);
|
|
|
+
|
|
|
+ // width: px2vw(380);
|
|
|
+ // height: px2vw(232);
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
+ }
|
|
|
+ .myVideo{
|
|
|
+ width: px2vw(380);
|
|
|
+ height: px2vw(232);
|
|
|
+ }
|
|
|
+ .videoControl{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
+ }
|
|
|
+ .experimentIntro-selected{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #ff0000;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+
|
|
|
+ margin-left: 15%;
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
+ }
|
|
|
+ .experimentIntro-noselect{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #c0c0c0;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+
|
|
|
+ margin-left: 15%;
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
+ }
|
|
|
+ .slice{
|
|
|
+ // width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #c0c0c0;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
|
|
|
- width: px2vw(360);
|
|
|
- height: px2vw(203);
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
+ }
|
|
|
+ .teachingGuide-selected{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
|
|
|
- // display: flex;
|
|
|
- // justify-content: center;
|
|
|
- // align-items:center;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #ff0000;
|
|
|
|
|
|
- // background-color: #ff0000;
|
|
|
- // color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
|
|
|
- // border-radius: 15px 15px 15px 15px;
|
|
|
+ margin-right: 15%;
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
}
|
|
|
+ .teachingGuide-noselect{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #c0c0c0;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items:center;
|
|
|
+
|
|
|
+ margin-right: 15%;
|
|
|
+ // border: 3rpx solid #D7D7D7;
|
|
|
+ }
|
|
|
</style>
|