|
|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="pinBottom-container">
|
|
|
+ <div class="pinBottom-container" @touchstart.stop @keydown.stop>
|
|
|
<div class="pinBottom center">
|
|
|
<div id="view-controllers"></div>
|
|
|
</div>
|
|
|
@@ -94,7 +94,6 @@
|
|
|
<img
|
|
|
class="icon icon-inside active"
|
|
|
:src="require('@/assets/images/icon/inside_active.png')"
|
|
|
-
|
|
|
/>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -106,7 +105,6 @@
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
:src="require('@/assets/images/icon/dollhouse.png')"
|
|
|
-
|
|
|
/>
|
|
|
<img
|
|
|
class="icon icon-inside active"
|
|
|
@@ -123,22 +121,20 @@
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
:src="require('@/assets/images/icon/floor.png')"
|
|
|
-
|
|
|
/>
|
|
|
<img
|
|
|
class="active icon icon-inside active"
|
|
|
:src="require('@/assets/images/icon/floor_active.png')"
|
|
|
-
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- 音乐 -->
|
|
|
- <!-- <div id="volume" @click="switchBGM" class="ui-icon bgandshare wide">
|
|
|
+ <!-- <div id="volume" @click="switchBGM" class="ui-icon bgandshare wide">
|
|
|
<div>
|
|
|
<img :src="require('@/assets/images/icon/musicon.png')" />
|
|
|
</div>
|
|
|
</div> -->
|
|
|
<div
|
|
|
- style="display:none;"
|
|
|
+ style="display: none"
|
|
|
@click="switchBGM"
|
|
|
id="myMoMu"
|
|
|
data-original-title="音乐"
|
|
|
@@ -149,7 +145,6 @@
|
|
|
title="关闭音乐"
|
|
|
/>
|
|
|
</div>
|
|
|
-
|
|
|
|
|
|
<div
|
|
|
data-original-title="VR"
|
|
|
@@ -161,7 +156,6 @@
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
:src="require('@/assets/images/VR.png')"
|
|
|
-
|
|
|
/>
|
|
|
</div>
|
|
|
<!-- <div
|
|
|
@@ -192,7 +186,6 @@
|
|
|
<img
|
|
|
class="icon icon-inside"
|
|
|
:src="require('@/assets/images/face.jpg')"
|
|
|
-
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -242,7 +235,6 @@
|
|
|
>
|
|
|
<a>
|
|
|
<img :src="require('@/assets/images/icon/fullscreen.png')" />
|
|
|
-
|
|
|
</a>
|
|
|
</div>
|
|
|
<div
|
|
|
@@ -254,7 +246,10 @@
|
|
|
style="display: none"
|
|
|
>
|
|
|
<a>
|
|
|
- <img :src="require('@/assets/images/icon/fullscreen_exit.png')" style="width:50px"/>
|
|
|
+ <img
|
|
|
+ :src="require('@/assets/images/icon/fullscreen_exit.png')"
|
|
|
+ style="width: 50px"
|
|
|
+ />
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="pull-right terms terms2">
|
|
|
@@ -266,58 +261,255 @@
|
|
|
<div class="centenName">珠海高新区中共党史学习教育园地线上展厅</div>
|
|
|
<!-- 右侧菜单栏 -->
|
|
|
<div class="rightTab" v-if="!isMobile">
|
|
|
- <div :title="item.name" v-for="(item,index) in rightTab" :key="index" @click="open(index)">
|
|
|
- <img :src="require('@/assets/tab/ac' + item.img)" v-if="item.isShow">
|
|
|
- <img :src="require('@/assets/tab/' + item.img)" v-else>
|
|
|
+ <div
|
|
|
+ :title="item.name"
|
|
|
+ v-for="(item, index) in rightTab"
|
|
|
+ :key="index"
|
|
|
+ @click="open(index)"
|
|
|
+ >
|
|
|
+ <img :src="require('@/assets/tab/ac' + item.img)" v-if="item.isShow" />
|
|
|
+ <img :src="require('@/assets/tab/' + item.img)" v-else />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 菜单栏-手机 -->
|
|
|
- <div v-else class="shouji" @click="isShowMo=!isShowMo">
|
|
|
- <img src="@/assets/tab/shouji.png" alt="">
|
|
|
+ <div v-else class="shouji" @click="isShowMo = !isShowMo">
|
|
|
+ <img src="@/assets/tab/shouji.png" alt="" />
|
|
|
<ul v-show="isShowMo">
|
|
|
- <li v-for="(item,index) in rightTabMo" :key="index">
|
|
|
- <img :src="require('@/assets/tab/' + item.img)" alt="">
|
|
|
+ <li v-for="(item, index) in rightTab" :key="index">
|
|
|
+ <img :src="require('@/assets/tab/' + item.img)" alt="" />
|
|
|
<span v-html="item.name"></span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
+ <!-- pc --路线 -->
|
|
|
+ <div class="pcTab1 myTab" v-if="rightTab[0].isShow">
|
|
|
+ <div class="conten">
|
|
|
+ <!-- 人物背景底纹 -->
|
|
|
+ <div class="RWbac"></div>
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="btnX" @click="rightTab[0].isShow = false">
|
|
|
+ <img src="@/assets/tab/×.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title">
|
|
|
+ <h3>珠海高新区中共党史学习教育园地</h3>
|
|
|
+ </div>
|
|
|
+ <!-- 地图 -->
|
|
|
+ <div class="map">
|
|
|
+ <img src="../../assets/tab/tab1map.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 最下面的跳转链接 -->
|
|
|
+ <div class="bottom">
|
|
|
+ <div>
|
|
|
+ <a href="www.123" title="123456"></a>
|
|
|
+ <a href=""></a>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a href=""></a>
|
|
|
+ <a href=""></a>
|
|
|
+ <a href=""></a>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <a href=""></a>
|
|
|
+ <a href=""></a>
|
|
|
+ <a href=""></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- pc --答题 -->
|
|
|
+ <div class="pcTab2 myTab" v-if="rightTab[1].isShow">
|
|
|
+ <div class="conten">
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="btnX" @click="rightTab[1].isShow = false">
|
|
|
+ <img src="@/assets/tab/×.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title">
|
|
|
+ <h3>党史问答</h3>
|
|
|
+ </div>
|
|
|
+ <p class="mintit" v-if="state==='one'">珠海高新区中共党史学习教育园地</p>
|
|
|
+ <!-- 题目 -->
|
|
|
+ <div class="topic" v-if="state==='one'">
|
|
|
+ <div class="topic_head">
|
|
|
+ <p>{{topic[topicInd].title}}-{{topic[topicInd].correct}}</p>
|
|
|
+ <span>第{{topicInd+1}}题 / 第10题</span>
|
|
|
+ </div>
|
|
|
+ <ul class="topic_con">
|
|
|
+ <li v-for="(item,index) in topic[topicInd].answer" :key="index">
|
|
|
+ <div class="case" @click="select(index,item.id)">
|
|
|
+ <!-- 选中了之后的显示 -->
|
|
|
+ <div v-show="caseInd===index"></div>
|
|
|
+ </div>
|
|
|
+ <span :class="{active:caseInd===index}">{{item.id +'、'+ item.txt}}</span>
|
|
|
+ </li>
|
|
|
+ <!-- 下面的按钮 -->
|
|
|
+ <div class="topic_btn" @click="btnOk">
|
|
|
+ 确 定
|
|
|
+ </div>
|
|
|
+ </ul>
|
|
|
+ <!-- 答错之后的提示 -->
|
|
|
+ <div class="error" v-if="caseErr">
|
|
|
+ <p>对不起，您答错了</p>
|
|
|
+ <p>正确答案：</p>
|
|
|
+ <p>{{caseErrTxt}}</p>
|
|
|
+ <div class="errBtn" @click="nextTi">下一题</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 答对了 -->
|
|
|
+ <div class="topicDui" v-if="state==='tow'">
|
|
|
+ <!-- 弹窗输入姓名 -->
|
|
|
+ <div class="inpName" v-if="stateTowInp">
|
|
|
+ <div class="shuru">
|
|
|
+ <el-input v-model="inpName" placeholder="请输入您的名字"></el-input>
|
|
|
+ <p>填写姓名后，即可下载答题记录</p>
|
|
|
+ </div>
|
|
|
+ <div class="inpBtnOk" @click="stateTowBtnOk">确 定</div>
|
|
|
+ </div>
|
|
|
+ <div>答题成功！</div>
|
|
|
+ <div>共答题10道，正确{{cunot}}道</div>
|
|
|
+ <div>答题人:{{inpName}}</div>
|
|
|
+ <p v-for="(item,index) in topic" :key="index">{{index+1}}、 {{item.title}}</p>
|
|
|
+ </div>
|
|
|
+ <!-- 答错了 -->
|
|
|
+ <div class="topicCuo" v-if="state==='three'">
|
|
|
+ <div>
|
|
|
+ <img src="../../assets/tab/error.png" alt="">
|
|
|
+ <p>答题失败，请再接再厉！</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+//引入题目
|
|
|
+import { questions } from "@/assets/js/data.js";
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
isGuide: true,
|
|
|
- rightTab:[
|
|
|
- {name:'党历路线',img:'tab1.png',isShow:false},
|
|
|
- {name:'党历问答',img:'tab2.png',isShow:false},
|
|
|
- {name:'打 卡',img:'tab3.png',isShow:false},
|
|
|
- {name:'留 言 板',img:'tab4.png',isShow:false},
|
|
|
- {name:'分 享',img:'tab5.png',isShow:false},
|
|
|
- ],
|
|
|
- rightTabMo:[
|
|
|
- {name:'党历路线',img:'tab1.png',isShowMo:false},
|
|
|
- {name:'党历问答',img:'tab2.png',isShowMo:false},
|
|
|
- {name:'留 言 板',img:'tab4.png',isShowMo:false},
|
|
|
- {name:'打 卡',img:'tab3.png',isShowMo:false},
|
|
|
- {name:'分 享',img:'tab5.png',isShowMo:false},
|
|
|
+ //-----------------
|
|
|
+ inpName:'',
|
|
|
+ state:'one',//用来控制显示答题--答题错误--答题正确的模块
|
|
|
+ stateTowInp:true,//答对了出现的输入框，输入名字
|
|
|
+ topicInd:0,//用来控制题目的索引
|
|
|
+ //题目数据
|
|
|
+ topic:[],//随机生成的10个题目数据
|
|
|
+ // 控制答题选中
|
|
|
+ cunot:0,//用来记录答对的题目个数
|
|
|
+ caseInd: null,//用来控制选择的样式
|
|
|
+ caseABC:null,//用来记录当前选择的答案，进行判断
|
|
|
+ caseErr:false,//答错了显示的弹窗
|
|
|
+ caseErrTxt:'',//答错了显示的正确答案
|
|
|
+ rightTab: [
|
|
|
+ { name: "党历路线", img: "tab1.png", isShow: false },
|
|
|
+ { name: "党历问答", img: "tab2.png", isShow: false },
|
|
|
+ { name: "留 言 板", img: "tab4.png", isShow: false },
|
|
|
+ { name: "打  卡", img: "tab3.png", isShow: false },
|
|
|
+ { name: "分  享", img: "tab5.png", isShow: false },
|
|
|
],
|
|
|
- isShowMo:false,
|
|
|
+ isShowMo: false,//手机端
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
- mounted(){
|
|
|
-
|
|
|
+ mounted() {
|
|
|
},
|
|
|
methods: {
|
|
|
+ //-----------------问答---------------------------
|
|
|
+ //点击答错里面的下一题
|
|
|
+ nextTi(){
|
|
|
+ // 最后一题
|
|
|
+ if(this.topicInd===9&&this.cunot>=7) {
|
|
|
+ this.state='tow'
|
|
|
+ this.topic.forEach(v=>{
|
|
|
+ let temp =''
|
|
|
+ v.answer.forEach(p=>{
|
|
|
+ if(p.id===v.correct) temp=p.txt
|
|
|
+ })
|
|
|
+ v.title+='---' +temp
|
|
|
+ })
|
|
|
+ }else if(this.topicInd===9&&this.cunot<7){
|
|
|
+ this.state='three'
|
|
|
+ }
|
|
|
+
|
|
|
+ this.caseInd=null
|
|
|
+ this.caseErr=false
|
|
|
+ if(this.topicInd<10) this.topicInd++
|
|
|
+ },
|
|
|
+ //点击确定
|
|
|
+ btnOk(){
|
|
|
+ if(this.caseInd===null) return this.$message.warning('未选择答案')
|
|
|
+ // 最后一题
|
|
|
+ if(this.topicInd===9&&this.cunot>=7) {
|
|
|
+ this.state='tow'
|
|
|
+ this.topic.forEach(v=>{
|
|
|
+ let temp =''
|
|
|
+ v.answer.forEach(p=>{
|
|
|
+ if(p.id===v.correct) temp=p.txt
|
|
|
+ })
|
|
|
+ v.title+='---' +temp
|
|
|
+ })
|
|
|
+ }else if(this.topicInd===9&&this.cunot<7){
|
|
|
+ this.state='three'
|
|
|
+ }
|
|
|
+ if(this.topic[this.topicInd].correct===this.caseABC) {
|
|
|
+ // console.log('答对了');
|
|
|
+ this.caseInd=null
|
|
|
+ if(this.topicInd<10) this.topicInd++
|
|
|
+ this.cunot++
|
|
|
+ }else {
|
|
|
+ // console.log('答错了');
|
|
|
+ this.caseErr=true
|
|
|
+ this.topic[this.topicInd].answer.forEach(v=>{
|
|
|
+ if(v.id===this.topic[this.topicInd].correct) this.caseErrTxt= v.id+ '、' +v.txt
|
|
|
+ })
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //选择题目
|
|
|
+ select(index,id){
|
|
|
+ this.caseInd=index
|
|
|
+ this.caseABC=id
|
|
|
+ },
|
|
|
+ //-----------------问答方法---------------------------
|
|
|
+ //答对了输入名字点击确定
|
|
|
+ stateTowBtnOk(){
|
|
|
+ this.stateTowInp=false
|
|
|
+ },
|
|
|
//点击右侧tab栏
|
|
|
- open(index){
|
|
|
- this.rightTab.forEach((v,i)=>{
|
|
|
- if(i===index) v.isShow=true
|
|
|
- else v.isShow=false
|
|
|
- })
|
|
|
+ open(index) {
|
|
|
+ this.rightTab.forEach((v, i) => {
|
|
|
+ if (i === index) v.isShow = true;
|
|
|
+ else v.isShow = false;
|
|
|
+ });
|
|
|
+ //点击的是答题--随机选10题
|
|
|
+ if (index === 1) {
|
|
|
+ this.stateTowInp=true
|
|
|
+ this.inpName=''
|
|
|
+ this.caseErr=false
|
|
|
+ this.topicInd=0
|
|
|
+ this.cunot=0
|
|
|
+ this.caseInd=null
|
|
|
+ this.state='one'
|
|
|
+ this.topic=[]
|
|
|
+ let arr = [];
|
|
|
+ for (let i = 0; i < 200; i++) {
|
|
|
+ //一个从0到100的数组
|
|
|
+ arr.push(i);
|
|
|
+ }
|
|
|
+ arr.sort(function () {
|
|
|
+ //随机打乱这个数组
|
|
|
+ return Math.random() - 0.5;
|
|
|
+ });
|
|
|
+ arr.length = 10; //改写长度
|
|
|
+ arr.forEach((v)=>{
|
|
|
+ this.topic.push(questions[v])
|
|
|
+ })
|
|
|
+ // console.log(999,this.topic); //控制台会输出10个不同的数
|
|
|
+ }
|
|
|
},
|
|
|
switchBGM() {
|
|
|
if ($("#volume img")[0].src.indexOf("on.png") > -1) {
|
|
|
@@ -331,13 +523,283 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
-.shouji{
|
|
|
+.myTab {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ .conten {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 1258px;
|
|
|
+ height: 778px;
|
|
|
+ // background-color: #ac3334;
|
|
|
+ background: url("../../assets/tab/tabC.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ .btnX {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 40px;
|
|
|
+ top: 40px;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 90%;
|
|
|
+ margin: 70px auto 0;
|
|
|
+ border-bottom: 2px solid #f0af7c;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ h3 {
|
|
|
+ padding-left: 15px;
|
|
|
+ font-size: 26px;
|
|
|
+ color: #edd3b0;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .RWbac {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: url("../../assets/tab/tab1dw.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .map {
|
|
|
+ width: 680px;
|
|
|
+ height: 540px;
|
|
|
+ margin: 10px auto;
|
|
|
+ & > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 86%;
|
|
|
+ height: 55px;
|
|
|
+ margin: 0 auto;
|
|
|
+ & > div {
|
|
|
+ padding-left: 42px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ width: 330px;
|
|
|
+ height: 55px;
|
|
|
+ &:nth-of-type(1) {
|
|
|
+ background: url("../../assets/tab/tab1_1.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &:nth-of-type(2) {
|
|
|
+ background: url("../../assets/tab/tab1_2.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &:nth-of-type(3) {
|
|
|
+ background: url("../../assets/tab/tab1_3.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ & > a {
|
|
|
+ z-index: 999;
|
|
|
+ width: 75px;
|
|
|
+ background-color: sandybrown;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.pcTab2 {
|
|
|
+ .conten {
|
|
|
+ background: url("../../assets/tab/tab2C.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .mintit {
|
|
|
+ margin: 15px 0;
|
|
|
+ padding-left: 80px;
|
|
|
+ color: #e9cfac;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ .topic {
|
|
|
+ position: relative;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 auto;
|
|
|
+ width: 87%;
|
|
|
+ height: 530px;
|
|
|
+ background-color: #edd3b0;
|
|
|
+ .topic_head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 96%;
|
|
|
+ margin: 0 auto;
|
|
|
+ color: #5e1616;
|
|
|
+ height: 108px;
|
|
|
+ padding: 0 20px;
|
|
|
+ border-bottom: 2px solid #ac3334;
|
|
|
+ & > P {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 24px;
|
|
|
+ max-width: 850px;
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topic_con {
|
|
|
+ color: #5e1616;
|
|
|
+ width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ height: 80px;
|
|
|
+ align-items: center;
|
|
|
+ .case {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ border: 2px solid #ac3334;
|
|
|
+ margin-right: 30px;
|
|
|
+ &>div {
|
|
|
+ margin: 3px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ background-color:#AC3334;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ & > span {
|
|
|
+ font-size: 22px;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #b54a46;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topic_btn{
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #EDD3B0;
|
|
|
+ background-color: #AC3334;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 72px;
|
|
|
+ line-height: 72px;
|
|
|
+ padding:0 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 27px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ .error{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ p {
|
|
|
+ margin: 20px;
|
|
|
+ font-size: 24px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #EDD3B0;
|
|
|
+ background-color: #AC3334;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 72px;
|
|
|
+ line-height: 72px;
|
|
|
+ padding:0 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 27px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topicDui{
|
|
|
+ width: 88%;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ div {
|
|
|
+ color: #EDD3B0;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #EDD3B0;
|
|
|
+ }
|
|
|
+ .inpName{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -10px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ width: 100%;
|
|
|
+ height: 84%;
|
|
|
+ .shuru{
|
|
|
+ width:500px;
|
|
|
+ height: 300px;
|
|
|
+ margin: 200px auto 0;
|
|
|
+ text-align: center;
|
|
|
+ &>p{
|
|
|
+ color: #fff;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .inpBtnOk{
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 24px;
|
|
|
+ color: #EDD3B0;
|
|
|
+ background-color: #AC3334;
|
|
|
+ cursor: pointer;
|
|
|
+ height: 72px;
|
|
|
+ line-height: 72px;
|
|
|
+ padding:0 40px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .topicCuo{
|
|
|
+ div {
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%,-50%);
|
|
|
+ width: 220px;
|
|
|
+ height: 220px;
|
|
|
+ img {
|
|
|
+ width: 178px;
|
|
|
+ height: 178px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin-top: 24px;
|
|
|
+ text-align: center;
|
|
|
+ color: #EDD3B0;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.shouji {
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
position: fixed;
|
|
|
top: 17px;
|
|
|
right: 5px;
|
|
|
- img{
|
|
|
+ img {
|
|
|
width: 30px;
|
|
|
height: 30px;
|
|
|
}
|
|
|
@@ -347,7 +809,7 @@ export default {
|
|
|
right: 5px;
|
|
|
width: 108px;
|
|
|
height: 175px;
|
|
|
- background-color: rgba(0,0,0,.5);
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
li {
|
|
|
display: flex;
|
|
|
justify-content: start;
|
|
|
@@ -355,18 +817,17 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 20%;
|
|
|
img {
|
|
|
- margin:0 10px ;
|
|
|
+ margin: 0 10px;
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-.centenName{
|
|
|
+.centenName {
|
|
|
padding: 10px 40px;
|
|
|
border-radius: 45px;
|
|
|
- background-color: rgba(0,0,0,.5);
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
position: fixed;
|
|
|
top: 15px;
|
|
|
left: 50%;
|
|
|
@@ -374,22 +835,22 @@ export default {
|
|
|
font-size: 20px;
|
|
|
color: #fff;
|
|
|
}
|
|
|
-.rightTab{
|
|
|
+.rightTab {
|
|
|
position: fixed;
|
|
|
right: 0;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
|
width: 110px;
|
|
|
height: 465px;
|
|
|
- background-color: rgba(0,0,0,.5);
|
|
|
- &>div {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ & > div {
|
|
|
cursor: pointer;
|
|
|
width: 100%;
|
|
|
height: 20%;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- &>img{
|
|
|
+ & > img {
|
|
|
width: 45px;
|
|
|
height: 45px;
|
|
|
}
|
|
|
@@ -407,8 +868,8 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.rightViewContainer {
|
|
|
- display: flex!important;
|
|
|
- align-items: center!important;
|
|
|
+ display: flex !important;
|
|
|
+ align-items: center !important;
|
|
|
}
|
|
|
#gui-modes-map {
|
|
|
> div {
|
|
|
@@ -416,44 +877,43 @@ export default {
|
|
|
> img {
|
|
|
width: @wh;
|
|
|
height: @wh;
|
|
|
- display: block!important;
|
|
|
+ display: block !important;
|
|
|
}
|
|
|
.active {
|
|
|
- display: none!important;
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
}
|
|
|
.active {
|
|
|
> img {
|
|
|
- display: none!important;
|
|
|
+ display: none !important;
|
|
|
}
|
|
|
.active {
|
|
|
- display: block!important;
|
|
|
+ display: block !important;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-.pinBottom.right .ui-icon{
|
|
|
- background:none;
|
|
|
+.pinBottom.right .ui-icon {
|
|
|
+ background: none;
|
|
|
}
|
|
|
|
|
|
-#gui-fullscreen img{
|
|
|
- width:22px;
|
|
|
-
|
|
|
+#gui-fullscreen img {
|
|
|
+ width: 22px;
|
|
|
}
|
|
|
-#volume{
|
|
|
+#volume {
|
|
|
width: 50px;
|
|
|
padding: 10px;
|
|
|
- background-color: rgba(0,0,0,.5) !important;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5) !important;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
-#gui-fullscreen{
|
|
|
- background-color: rgba(0,0,0,.5) !important;
|
|
|
- border-radius: 50%;
|
|
|
+#gui-fullscreen {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5) !important;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
-#gui-fullscreen-exit{
|
|
|
- width: 50px;
|
|
|
- background-color: rgba(0,0,0,.5) !important;
|
|
|
- border-radius: 50%;
|
|
|
+#gui-fullscreen-exit {
|
|
|
+ width: 50px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.5) !important;
|
|
|
+ border-radius: 50%;
|
|
|
}
|
|
|
#gui-fullscreen-exit img {
|
|
|
width: 22px !important;
|
|
|
@@ -462,7 +922,7 @@ export default {
|
|
|
background: none !important;
|
|
|
// margin-right: 20px!important;
|
|
|
> div {
|
|
|
- width: 22px!important;
|
|
|
+ width: 22px !important;
|
|
|
margin-left: 3px;
|
|
|
cursor: pointer;
|
|
|
img {
|
|
|
@@ -471,29 +931,28 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
@media only screen and (max-width: 900px) {
|
|
|
- .centenName{
|
|
|
+ .centenName {
|
|
|
text-align: center;
|
|
|
- font-size:14px;
|
|
|
+ font-size: 14px;
|
|
|
width: 78%;
|
|
|
padding: 8px;
|
|
|
}
|
|
|
}
|
|
|
@media only screen and (max-width: 487px) {
|
|
|
-
|
|
|
- #myMoMu{
|
|
|
- display: block !important;
|
|
|
-}
|
|
|
-#myMoMu img {
|
|
|
- margin-left: 12px;
|
|
|
-}
|
|
|
-.viewContainer{
|
|
|
- background-color: rgba(0,0,0,.5);
|
|
|
- padding: 15px 0 10px;
|
|
|
- border-radius: 50px;
|
|
|
-}
|
|
|
+ #myMoMu {
|
|
|
+ display: block !important;
|
|
|
+ }
|
|
|
+ #myMoMu img {
|
|
|
+ margin-left: 12px;
|
|
|
+ }
|
|
|
+ .viewContainer {
|
|
|
+ background-color: rgba(0, 0, 0, 0.5);
|
|
|
+ padding: 15px 0 10px;
|
|
|
+ border-radius: 50px;
|
|
|
+ }
|
|
|
|
|
|
@wh: 22px;
|
|
|
- @margin:10px;
|
|
|
+ @margin: 10px;
|
|
|
#play,
|
|
|
#pause {
|
|
|
margin-bottom: @margin;
|
|
|
@@ -524,14 +983,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- .bgandshare {
|
|
|
+ .bgandshare {
|
|
|
display: none !important;
|
|
|
display: flex;
|
|
|
position: fixed;
|
|
|
left: 50px;
|
|
|
- bottom:25px;
|
|
|
+ bottom: 25px;
|
|
|
flex-direction: column;
|
|
|
- margin-right: 10px!important;
|
|
|
+ margin-right: 10px !important;
|
|
|
> div {
|
|
|
width: @wh!important;
|
|
|
img {
|
|
|
@@ -539,15 +998,14 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- #volume{
|
|
|
+ #volume {
|
|
|
background-color: transparent !important;
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
@media only screen and (max-width: 360px) {
|
|
|
- .centenName{
|
|
|
- left:45%;
|
|
|
- font-size:12px;
|
|
|
+ .centenName {
|
|
|
+ left: 45%;
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
