|
|
@@ -281,7 +281,7 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <!-- pc --路线 -->
|
|
|
+ <!-- pc --路线 ----------------------->
|
|
|
<div class="pcTab1 myTab" v-if="rightTab[0].isShow">
|
|
|
<div class="conten">
|
|
|
<!-- 人物背景底纹 -->
|
|
|
@@ -317,168 +317,342 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <!-- pc --答题 -->
|
|
|
+ <!-- pc --答题 -------------------------->
|
|
|
<div class="pcTab2 myTab" v-if="rightTab[1].isShow">
|
|
|
- <div class="conten">
|
|
|
+ <div class="conten" ref="topicDui">
|
|
|
<!-- 关闭按钮 -->
|
|
|
- <div class="btnX" @click="rightTab[1].isShow = false">
|
|
|
+ <div class="btnX" @click="rightTab[1].isShow = false" v-if="topicXShow">
|
|
|
<img src="@/assets/tab/×.png" alt="" />
|
|
|
</div>
|
|
|
<!-- 标题 -->
|
|
|
<div class="title">
|
|
|
<h3>党史问答</h3>
|
|
|
</div>
|
|
|
- <p class="mintit" v-if="state==='one'">珠海高新区中共党史学习教育园地</p>
|
|
|
+ <p class="mintit" v-if="state === 'one'">
|
|
|
+ 珠海高新区中共党史学习教育园地
|
|
|
+ </p>
|
|
|
<!-- 题目 -->
|
|
|
- <div class="topic" v-if="state==='one'">
|
|
|
+ <div class="topic" v-if="state === 'one'">
|
|
|
<div class="topic_head">
|
|
|
- <p>{{topic[topicInd].title}}-{{topic[topicInd].correct}}</p>
|
|
|
- <span>第{{topicInd+1}}题 / 第10题</span>
|
|
|
+ <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)">
|
|
|
+ <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 v-show="caseInd === index"></div>
|
|
|
</div>
|
|
|
- <span :class="{active:caseInd===index}">{{item.id +'、'+ item.txt}}</span>
|
|
|
+ <span :class="{ active: caseInd === index }">{{
|
|
|
+ item.id + "、" + item.txt
|
|
|
+ }}</span>
|
|
|
</li>
|
|
|
<!-- 下面的按钮 -->
|
|
|
- <div class="topic_btn" @click="btnOk">
|
|
|
- 确 定
|
|
|
- </div>
|
|
|
+ <div class="topic_btn" @click="btnOk">确 定</div>
|
|
|
</ul>
|
|
|
<!-- 答错之后的提示 -->
|
|
|
<div class="error" v-if="caseErr">
|
|
|
<p>对不起，您答错了</p>
|
|
|
<p>正确答案：</p>
|
|
|
- <p>{{caseErrTxt}}</p>
|
|
|
+ <p>{{ caseErrTxt }}</p>
|
|
|
<div class="errBtn" @click="nextTi">下一题</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 答对了 -->
|
|
|
- <div class="topicDui" v-if="state==='tow'">
|
|
|
+ <div class="topicDui" v-if="state === 'tow'">
|
|
|
<!-- 弹窗输入姓名 -->
|
|
|
- <div class="inpName" v-if="stateTowInp">
|
|
|
+ <div class="inpName" v-if="stateTowInp">
|
|
|
<div class="shuru">
|
|
|
- <el-input v-model="inpName" placeholder="请输入您的名字"></el-input>
|
|
|
+ <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>共答题10道，正确{{ cunot }}道</div>
|
|
|
+ <div>答题人:{{ inpName }}</div>
|
|
|
+ <p v-for="(item, index) in topic" :key="index">
|
|
|
+ {{ index + 1 }}、 {{ item.title }}
|
|
|
+ </p>
|
|
|
+ <!-- 生成的二维码 -->
|
|
|
+ <div class="qrCode" v-if="qrCodeUrl">
|
|
|
+ <img :src="qrCodeUrl" alt="" />
|
|
|
+ <a class="el-icon-download" :href="base64SUrl" download
|
|
|
+ >下载答题记录</a
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<!-- 答错了 -->
|
|
|
- <div class="topicCuo" v-if="state==='three'">
|
|
|
+ <div class="topicCuo" v-if="state === 'three'">
|
|
|
<div>
|
|
|
- <img src="../../assets/tab/error.png" alt="">
|
|
|
- <p>答题失败，请再接再厉！</p>
|
|
|
+ <img src="../../assets/tab/error.png" alt="" />
|
|
|
+ <p>答题失败，请再接再厉！</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- pc --留言板 --------------------------->
|
|
|
+ <div class="pcTab3 myTab" v-if="rightTab[2].isShow">
|
|
|
+ <div class="conten">
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="btnX" @click="rightTab[2].isShow = false">
|
|
|
+ <img src="@/assets/tab/×.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title">
|
|
|
+ <h3>留 言 板</h3>
|
|
|
+ </div>
|
|
|
+ <!-- 内容 -->
|
|
|
+ <ul class="liuyan">
|
|
|
+ <li v-for="i in 10" :key="i">
|
|
|
+ <div class="name">匿名匿名匿</div>
|
|
|
+ <div class="con">
|
|
|
+ 实现中华民族伟大复兴，就是中华民族近代以来最伟大的梦想。
|
|
|
+ </div>
|
|
|
+ <div class="time">2021-11-10 12:03</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <!-- 分页器 -->
|
|
|
+ <div class="pagination">
|
|
|
+ <el-pagination layout="prev, pager, next" :total="500">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <!-- 文本域 -->
|
|
|
+ <div class="texe">
|
|
|
+ <el-input
|
|
|
+ resize="none"
|
|
|
+ type="textarea"
|
|
|
+ :rows="3"
|
|
|
+ placeholder="欢迎提交您的珍贵留言，100字以内~"
|
|
|
+ v-model="textarea"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 底部输入框和按钮 -->
|
|
|
+ <div class="bottBtn">
|
|
|
+ <el-radio v-model="radio" label="1">匿名发表</el-radio>
|
|
|
+ <el-radio v-model="radio" label="2">
|
|
|
+ <el-input placeholder="请输入您的姓名" :disabled='radio==="1"' v-model="myName"></el-input>
|
|
|
+ </el-radio>
|
|
|
+ <!-- 提交按钮 -->
|
|
|
+ <div class="mybtn" @click="liuyanBtn">提 交</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- pc ---打卡------------------------>
|
|
|
+ <div class="pcTab4 myTab" v-if="rightTab[3].isShow">
|
|
|
+ <div class="conten">
|
|
|
+ <!-- 人物背景底纹 -->
|
|
|
+ <div class="RWbac"></div>
|
|
|
+ <!-- 关闭按钮 -->
|
|
|
+ <div class="btnX" @click="rightTab[3].isShow = false">
|
|
|
+ <img src="@/assets/tab/×.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <!-- 标题 -->
|
|
|
+ <div class="title">
|
|
|
+ <h3>打 卡</h3>
|
|
|
+ </div>
|
|
|
+ <!-- 文字内容 -->
|
|
|
+ <p>王大锤</p>
|
|
|
+ <div class="txt" v-html="tab3Data[0].txt"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
//引入题目
|
|
|
import { questions } from "@/assets/js/data.js";
|
|
|
+import html2canvas from "html2canvas";
|
|
|
export default {
|
|
|
components: {},
|
|
|
data() {
|
|
|
return {
|
|
|
isGuide: true,
|
|
|
- //-----------------
|
|
|
- inpName:'',
|
|
|
- state:'one',//用来控制显示答题--答题错误--答题正确的模块
|
|
|
- stateTowInp:true,//答对了出现的输入框，输入名字
|
|
|
- topicInd:0,//用来控制题目的索引
|
|
|
+ //-----------------党史问答数据-----------------
|
|
|
+ inpName: "",
|
|
|
+ base64SUrl: "", //党史问答的图片地址
|
|
|
+ qrCodeUrl: "", //党史问答生成的二维码图片地址
|
|
|
+ topicXShow: true, //关闭按钮，答题成功输入名字后，生成图片，需要隐藏
|
|
|
+ state: "one", //用来控制显示答题--答题错误--答题正确的模块
|
|
|
+ stateTowInp: true, //答对了出现的输入框，输入名字
|
|
|
+ topicInd: 0, //用来控制题目的索引
|
|
|
//题目数据
|
|
|
- topic:[],//随机生成的10个题目数据
|
|
|
+ topic: [], //随机生成的10个题目数据
|
|
|
// 控制答题选中
|
|
|
- cunot:0,//用来记录答对的题目个数
|
|
|
- caseInd: null,//用来控制选择的样式
|
|
|
- caseABC:null,//用来记录当前选择的答案，进行判断
|
|
|
- caseErr:false,//答错了显示的弹窗
|
|
|
- caseErrTxt:'',//答错了显示的正确答案
|
|
|
+ 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 },
|
|
|
+ { name: " 打 卡 ", img: "tab3.png", isShow: false },
|
|
|
+ { name: " 分 享 ", img: "tab5.png", isShow: false },
|
|
|
+ ],
|
|
|
+ //-----------------留言板数据--------------------------------
|
|
|
+ textarea: "", //文本域
|
|
|
+ radio: "1",
|
|
|
+ myName: "",
|
|
|
+ //----------------------打卡数据-------------------------------
|
|
|
+ tab3Data:[
|
|
|
+ {txt:'  <span>解放万山群岛战役</span>是人民解放军历史上第一次陆、海军协同作战，拔除<span>国民党军队</span>在华南沿海的最后立足点，彻底粉碎国民党军队对珠江口的封锁。'}
|
|
|
],
|
|
|
- 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
|
|
|
+ //--------------留言板-------------------------
|
|
|
+ //点击提交
|
|
|
+ liuyanBtn() {
|
|
|
+ if (this.textarea.length > 100)
|
|
|
+ return this.$message.warning("留言内容不能超过100个字");
|
|
|
+ let data = {};
|
|
|
+ data.content = this.textarea;
|
|
|
+ if (this.radio === "1") {
|
|
|
+ //匿名
|
|
|
+ data.userName = "";
|
|
|
+ } else if (this.radio === "2") {
|
|
|
+ if (this.myName.trim() === "")
|
|
|
+ return this.$message.warning("名字不能为空");
|
|
|
+ if (this.myName.length > 5)
|
|
|
+ return this.$message.warning("名字不能超过5个字");
|
|
|
+ //输入名字
|
|
|
+ data.userName = this.myName;
|
|
|
+ }
|
|
|
+ //发送请求
|
|
|
+ $.ajax({
|
|
|
+ url: "http://192.168.0.135:8011/web/comment/save",
|
|
|
+ type: "POST",
|
|
|
+ data: JSON.stringify(data),
|
|
|
+ dataType: "json",
|
|
|
+ contentType: "application/json;charset=UTF-8",
|
|
|
+ })
|
|
|
+ .done((res) => {
|
|
|
+ console.log("留言成功", res);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("留言成功，等待管理员审核");
|
|
|
+ this.myName = this.textarea = "";
|
|
|
+ }
|
|
|
})
|
|
|
- }else if(this.topicInd===9&&this.cunot<7){
|
|
|
- this.state='three'
|
|
|
+ .fail((res) => {
|
|
|
+ console.log(222, res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //-----------------党史问答---------------------------
|
|
|
+ //点击答错里面的下一题
|
|
|
+ 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++
|
|
|
+ this.caseInd = null;
|
|
|
+ this.caseErr = false;
|
|
|
+ if (this.topicInd < 10) this.topicInd++;
|
|
|
},
|
|
|
//点击确定
|
|
|
- btnOk(){
|
|
|
- if(this.caseInd===null) return this.$message.warning('未选择答案')
|
|
|
+ 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.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) {
|
|
|
+ if (this.topic[this.topicInd].correct === this.caseABC) {
|
|
|
// console.log('答对了');
|
|
|
- this.caseInd=null
|
|
|
- if(this.topicInd<10) this.topicInd++
|
|
|
- this.cunot++
|
|
|
- }else {
|
|
|
+ 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
|
|
|
- })
|
|
|
-
|
|
|
+ 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
|
|
|
+ select(index, id) {
|
|
|
+ this.caseInd = index;
|
|
|
+ this.caseABC = id;
|
|
|
},
|
|
|
- //-----------------问答方法---------------------------
|
|
|
//答对了输入名字点击确定
|
|
|
- stateTowBtnOk(){
|
|
|
- this.stateTowInp=false
|
|
|
+ stateTowBtnOk() {
|
|
|
+ if (this.inpName.trim() === "")
|
|
|
+ return this.$message.warning("名字不能为空");
|
|
|
+ if (this.inpName.length > 5)
|
|
|
+ return this.$message.warning("名字不能超过5个字");
|
|
|
+ this.stateTowInp = false;
|
|
|
+ this.topicXShow = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
|
|
|
+ html2canvas(this.$refs.topicDui, {
|
|
|
+ backgroundColor: null,
|
|
|
+ useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
|
|
|
+ }).then((canvas) => {
|
|
|
+ let base64String = canvas.toDataURL("image/png"); // 最终生成图片的 url
|
|
|
+ this.base64SUrl = base64String;
|
|
|
+ // console.log(999, base64String);
|
|
|
+ //base64格式图片转换为FormData对象进行上传
|
|
|
+ let bytes = window.atob(base64String.split(",")[1]);
|
|
|
+ let array = [];
|
|
|
+ for (let i = 0; i < bytes.length; i++) {
|
|
|
+ array.push(bytes.charCodeAt(i));
|
|
|
+ }
|
|
|
+ let blob = new Blob([new Uint8Array(array)], { type: "image/jpeg" });
|
|
|
+ let fd = new FormData();
|
|
|
+ fd.append("file", blob, Date.now() + ".jpg");
|
|
|
+ //Ajax上传FormData对象
|
|
|
+ $.ajax({
|
|
|
+ url: "http://192.168.0.135:8011/web/upload",
|
|
|
+ type: "POST",
|
|
|
+ cache: false,
|
|
|
+ data: fd,
|
|
|
+ processData: false,
|
|
|
+ contentType: false,
|
|
|
+ })
|
|
|
+ .done((res) => {
|
|
|
+ console.log("上传图片成功", res);
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success("生成二维码成功");
|
|
|
+ this.qrCodeUrl = "http://192.168.0.135:8011/" + res.data;
|
|
|
+ this.topicXShow = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .fail((res) => {
|
|
|
+ console.log(222, res);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }, 100);
|
|
|
},
|
|
|
+
|
|
|
//点击右侧tab栏
|
|
|
open(index) {
|
|
|
this.rightTab.forEach((v, i) => {
|
|
|
@@ -487,14 +661,15 @@ export default {
|
|
|
});
|
|
|
//点击的是答题--随机选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=[]
|
|
|
+ this.topicXShow = true;
|
|
|
+ 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的数组
|
|
|
@@ -505,9 +680,9 @@ export default {
|
|
|
return Math.random() - 0.5;
|
|
|
});
|
|
|
arr.length = 10; //改写长度
|
|
|
- arr.forEach((v)=>{
|
|
|
- this.topic.push(questions[v])
|
|
|
- })
|
|
|
+ arr.forEach((v) => {
|
|
|
+ this.topic.push(questions[v]);
|
|
|
+ });
|
|
|
// console.log(999,this.topic); //控制台会输出10个不同的数
|
|
|
}
|
|
|
},
|
|
|
@@ -523,6 +698,17 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+}
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ // box-shadow : inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #edd3b0;
|
|
|
+ border-color: #edd3b0;
|
|
|
+ color: #edd3b0;
|
|
|
+ outline: none;
|
|
|
+}
|
|
|
+
|
|
|
.myTab {
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
@@ -666,11 +852,11 @@ export default {
|
|
|
height: 30px;
|
|
|
border: 2px solid #ac3334;
|
|
|
margin-right: 30px;
|
|
|
- &>div {
|
|
|
+ & > div {
|
|
|
margin: 3px;
|
|
|
width: 20px;
|
|
|
height: 20px;
|
|
|
- background-color:#AC3334;
|
|
|
+ background-color: #ac3334;
|
|
|
}
|
|
|
}
|
|
|
& > span {
|
|
|
@@ -681,21 +867,21 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .topic_btn{
|
|
|
+ .topic_btn {
|
|
|
border-radius: 8px;
|
|
|
font-size: 24px;
|
|
|
- color: #EDD3B0;
|
|
|
- background-color: #AC3334;
|
|
|
+ color: #edd3b0;
|
|
|
+ background-color: #ac3334;
|
|
|
cursor: pointer;
|
|
|
height: 72px;
|
|
|
line-height: 72px;
|
|
|
- padding:0 40px;
|
|
|
+ padding: 0 40px;
|
|
|
position: absolute;
|
|
|
bottom: 27px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
}
|
|
|
- .error{
|
|
|
+ .error {
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
@@ -708,90 +894,185 @@ export default {
|
|
|
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%);
|
|
|
+ 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;
|
|
|
+ .topicDui {
|
|
|
+ width: 88%;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ div {
|
|
|
+ color: #edd3b0;
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ color: #edd3b0;
|
|
|
+ }
|
|
|
+ .inpName {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: -15px;
|
|
|
+ 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;
|
|
|
- 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;
|
|
|
+ .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%;
|
|
|
- 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;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .qrCode {
|
|
|
+ text-align: right;
|
|
|
+ position: absolute;
|
|
|
+ top: 140px;
|
|
|
+ right: 62px;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ margin-top: 10px;
|
|
|
+ display: block;
|
|
|
+ color: #edd3b0;
|
|
|
+ font-size: 16px;
|
|
|
+ i {
|
|
|
+ font-size: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.pcTab3 {
|
|
|
+ .liuyan {
|
|
|
+ padding-right: 20px;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ width: 88%;
|
|
|
+ height: 350px;
|
|
|
+ overflow-y: auto;
|
|
|
+ li {
|
|
|
+ color: #f0af7c;
|
|
|
+ font-size: 20px;
|
|
|
+ border-bottom: 1px dashed #f0af7c;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ & > div {
|
|
|
+ padding: 12px 0;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ width: 700px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ width: 180px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ width: 380px;
|
|
|
+ margin: 20px auto;
|
|
|
+ }
|
|
|
+ .texe {
|
|
|
+ width: 86%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .bottBtn {
|
|
|
+ position: relative;
|
|
|
+ width: 86%;
|
|
|
+ margin: 20px auto 0;
|
|
|
+ .mybtn {
|
|
|
+ font-size: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 120px;
|
|
|
+ background-color: #edd3b0;
|
|
|
+ border-radius: 8px;
|
|
|
+ color: #ae3939;
|
|
|
+ height: 30px;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.pcTab4{
|
|
|
+ .RWbac {
|
|
|
+ background: url("../../assets/tab/tab3dw.png") !important;
|
|
|
+ background-size: 100% 100% !important;
|
|
|
+ }
|
|
|
+ .txt{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #EDD3B0;
|
|
|
+ width: 680px;
|
|
|
+ margin: 20px 0 0 80px;
|
|
|
+ /deep/span {
|
|
|
+ font-weight: 700;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.shouji {
|
|
|
width: 30px;
|
