mirror of
https://github.com/Amterasu/cocos-vuecli-demo.git
synced 2025-11-04 05:15:42 +00:00
init
This commit is contained in:
靳国强
25
vueTem/src/App.vue
Normal file
25
vueTem/src/App.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<the-header></the-header>
|
||||
<router-view >
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import creatorLoader from '../static/cocos-loader/creator-load'
|
||||
import TheHeader from './views/header/TheHeader'
|
||||
|
||||
export default {
|
||||
name: 'electron-cocos',
|
||||
components: {
|
||||
TheHeader: TheHeader
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* CSS */
|
||||
</style>
|
||||
169
vueTem/src/components/BaseAlert.vue
Normal file
169
vueTem/src/components/BaseAlert.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="alert-layer f--hcc" v-show="showStatus">
|
||||
<div class="alert-box">
|
||||
<div class="alert-header f--hlc">
|
||||
<span class="icon "></span>
|
||||
<div class="">{{title}}</div>
|
||||
</div>
|
||||
<div class="alert-content">
|
||||
<div class="content f--hlc">
|
||||
<span :class="iconClass"></span>
|
||||
<div class="margin-content">
|
||||
<div class="">{{text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn-clear sure-btn" @click="ensure">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const TYPE_CLASSES_MAP = {
|
||||
success: "am-icon-circle-check",
|
||||
warning: "am-icon-warning",
|
||||
error: "am-icon-circle-cross"
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showStatus: this.show,
|
||||
text: this.value
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
ensure() {
|
||||
this.showStatus = false;
|
||||
this.$emit("update:show", this.showStatus);
|
||||
this.$emit("ensure");
|
||||
}
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
// 开关的状态
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
title: {
|
||||
type: [String, Number],
|
||||
default: "提示"
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "info"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.text = newVal;
|
||||
},
|
||||
show(newVal) {
|
||||
this.showStatus = newVal;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass() {
|
||||
return TYPE_CLASSES_MAP[this.type] || "am-icon-circle-check";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.alert-layer,
|
||||
.confirm-layer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
.alert-box {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-ms-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
width: 400px;
|
||||
background: #353535;
|
||||
overflow: hidden;
|
||||
.alert-header {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #545454;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: url(../images/icon1.svg) no-repeat -1400px -240px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.alert-content {
|
||||
padding: 0 30px;
|
||||
.content {
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
margin-top: 16px;
|
||||
background: #232323;
|
||||
padding: 1px;
|
||||
font-size: 14px;
|
||||
color: #b5b5b5;
|
||||
box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) inset;
|
||||
.am-icon-circle-check {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
background: url(../images/icon1.svg) no-repeat -1480px -200px;
|
||||
}
|
||||
.am-icon-warning {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
background: url(../images/icon1.svg) no-repeat -1480px -240px;
|
||||
}
|
||||
.am-icon-circle-cross {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
background: url(../images/icon1.svg) no-repeat -1600px -200px;
|
||||
}
|
||||
.margin-content {
|
||||
margin: 10px 10px 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sure-btn {
|
||||
border-radius: 2px;
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #151515;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: #b5b5b5;
|
||||
margin: 12px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
64
vueTem/src/components/BaseColorPicker.vue
Normal file
64
vueTem/src/components/BaseColorPicker.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<div class="f--hlc ant-row ant-form-item ant-form-full">
|
||||
<div class="ant-col-l ant-form-item-label">
|
||||
<label>
|
||||
<slot name="label">
|
||||
{{label}}
|
||||
</slot>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ant-col-r">
|
||||
<div class="ant-form-item-control">
|
||||
<div>
|
||||
<span class="ant-input-wrapper" style="float:left">
|
||||
<el-color-picker v-model="currColor" size="mini" :disabled="!switchStatus" @change="emitColor" :show-alpha="false" />
|
||||
</span>
|
||||
<el-switch v-model="switchStatus" active-color="#ffa800" inactive-color="#151515" style="margin-top:3px;" @change="changeSwitch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
switchStatus: this.switch,
|
||||
currColor: this.value
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeSwitch() {
|
||||
this.emitColor();
|
||||
},
|
||||
emitColor() {
|
||||
this.$emit("changeStauts", this.switchStatus, this.currColor);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
switch: {
|
||||
// 开关的状态
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
value: {
|
||||
// 颜色
|
||||
type: String,
|
||||
default: "#fff"
|
||||
},
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.currColor = newVal;
|
||||
},
|
||||
switch(newVal) {
|
||||
this.switchStatus = newVal;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
175
vueTem/src/components/BaseConfirm.vue
Normal file
175
vueTem/src/components/BaseConfirm.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class="confirm-layer f--hcc" v-show="showStatus">
|
||||
<div class="confirm-box">
|
||||
<div class="confirm-header f--hlc">
|
||||
<span class="icon paid-service-icon"></span>
|
||||
<div class="">{{title}}</div>
|
||||
|
||||
</div>
|
||||
<div class="confirm-content">
|
||||
<div class="content f--hlc warning">
|
||||
<span :class="iconClass"></span>
|
||||
<div class="margin-content">
|
||||
<div>{{text}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-group f--hcc">
|
||||
<button class="btn-clear sure-btn" @click="close">取消</button>
|
||||
<button class="btn-clear sure-btn" @click="ensure">确定</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const TYPE_CLASSES_MAP = {
|
||||
success: "am-icon-circle-check",
|
||||
warning: "am-icon-warning",
|
||||
error: "am-icon-circle-cross"
|
||||
};
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showStatus: this.show,
|
||||
text: this.value
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
ensure() {
|
||||
this.close();
|
||||
this.$emit("ensure");
|
||||
},
|
||||
close(){
|
||||
this.showStatus = false;
|
||||
this.$emit("update:show", this.showStatus);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
show: {
|
||||
// 开关的状态
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
title: {
|
||||
type: [String, Number],
|
||||
default: "提示"
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "info"
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.text = newVal;
|
||||
},
|
||||
show(newVal) {
|
||||
this.showStatus = newVal;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
iconClass() {
|
||||
return TYPE_CLASSES_MAP[this.type] || "am-icon-circle-check";
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.confirm-layer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
.confirm-box {
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-ms-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
width: 400px;
|
||||
background: #353535;
|
||||
overflow: hidden;
|
||||
.confirm-header {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #545454;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: url(../images/icon1.svg) no-repeat -1400px -560px;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.confirm-content {
|
||||
padding: 0 30px;
|
||||
.content {
|
||||
border-radius: 2px;
|
||||
width: 100%;
|
||||
line-height: 25px;
|
||||
margin-top: 16px;
|
||||
background: #232323;
|
||||
padding: 1px;
|
||||
font-size: 14px;
|
||||
color: #b5b5b5;
|
||||
box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.1);
|
||||
-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) inset;
|
||||
.am-icon-circle-check {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
background: url(../images/icon1.svg) no-repeat -1480px -200px;
|
||||
}
|
||||
.am-icon-warning {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
background: url(../images/icon1.svg) no-repeat -1480px -240px;
|
||||
}
|
||||
.am-icon-circle-cross {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
min-width: 28px;
|
||||
display: block;
|
||||
margin: 10px;
|
||||
background: url(../images/icon1.svg) no-repeat -1600px -200px;
|
||||
}
|
||||
.margin-content {
|
||||
margin: 10px 10px 10px 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.sure-btn {
|
||||
border-radius: 2px;
|
||||
width: 100px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
color: #151515;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
background: #b5b5b5;
|
||||
margin: 12px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
625
vueTem/src/components/BaseMaterialContainer.vue
Normal file
625
vueTem/src/components/BaseMaterialContainer.vue
Normal file
@@ -0,0 +1,625 @@
|
||||
<template>
|
||||
<div class="item">
|
||||
<!-- 如果是模板则显示封面 -->
|
||||
<div v-if="isTemplate && fold==true" @mouseenter="templateMaskShow = true">
|
||||
<img :src="datas.Cover" class="templateCover">
|
||||
</div>
|
||||
<!-- 如果点击分块使用则拆解显示 -->
|
||||
<div v-else v-html="html" @click.stop="renderMaterial($event)" :class="{partContent:isTemplate && fold==false}"></div>
|
||||
<!-- 收藏按钮 -->
|
||||
<i class="fa media " :class="{'fa-star':IsCollect,'fa-star-o':!IsCollect}" v-show="fold==true" @click="collectItem"></i>
|
||||
<!-- 退出分块 -->
|
||||
<i aria-hidden="true" class="fa fa-sign-out media" v-show="isTemplate && fold==false" @click="quitUsePart"></i>
|
||||
<!-- 是否是vip -->
|
||||
<div class="iconfont icon-VIP" v-if="IsVip"></div>
|
||||
<!-- 显示分块使用和整套使用 -->
|
||||
<div class="templateSelect" v-if="isTemplate && fold==true && templateMaskShow" @mouseleave="templateMaskShow = false">
|
||||
<p>
|
||||
<button type="button" class="el-button el-tooltip el-button--default" @click="showTemplateAllSection">
|
||||
<span>
|
||||
<i class="iconfont icon-quanbufenlei"></i>
|
||||
<span>分块使用模板</span>
|
||||
</span>
|
||||
</button>
|
||||
<button type="button" class="el-button el-tooltip el-button--default" @click="useAll">
|
||||
<span>
|
||||
<i aria-hidden="true" class="iconfont icon-quanbu"></i>
|
||||
<span>整套使用模板</span>
|
||||
</span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
<am-alert :show.sync="showAlert" v-model="alertText" @ensure="hideAlert" type="error" />
|
||||
<login-dialog :show.sync="showLoginDialog" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import amAlert from "../components/BaseAlert";
|
||||
import LoginDialog from "../components/LoginDialog";
|
||||
import { mapState } from "vuex";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
fold: true, // 是否折叠
|
||||
templateMaskShow: false,
|
||||
showAlert: false,
|
||||
alertText: "",
|
||||
IsCollect: this.datas.IsCollect,
|
||||
IsVip: this.datas.is_vip,
|
||||
showLoginDialog: false,
|
||||
event:null,// 这个是当前点击的事件对象，用于登陆后直接把素材放入选区
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
loginShow() {
|
||||
this.showLoginDialog = true;
|
||||
},
|
||||
loginSuccess(type) {
|
||||
// 登陆成功的回调，去处理一些事务
|
||||
// 收藏后登陆，登陆后自动收藏
|
||||
if (type == "collect") this.collectCallback();
|
||||
// vip素材点击后放入编辑器
|
||||
if (type == "open") this.openCallback();
|
||||
},
|
||||
collectCallback() {
|
||||
this.collectItem();
|
||||
},
|
||||
openCallback(){
|
||||
this.renderMaterial(this.event)
|
||||
},
|
||||
// 向编辑器中构建素材
|
||||
renderMaterial(event) {
|
||||
this.event = event;
|
||||
if (this.datas.IfSystem == 1) {
|
||||
return false;
|
||||
} else if (
|
||||
$(".sidebar")
|
||||
.find("li.active")
|
||||
.attr("data-type") == "imglist" &&
|
||||
$(this.ue.body).find(".checkSelected").length > 0 &&
|
||||
$(this.ue.body)
|
||||
.find(".checkSelected")
|
||||
.children()[0].localName == "img"
|
||||
) {
|
||||
$(this.ue.body)
|
||||
.find(".checkSelected")
|
||||
.children("img")
|
||||
.attr(
|
||||
"src",
|
||||
$(event.currentTarget)
|
||||
.find("img")
|
||||
.attr("src")
|
||||
);
|
||||
$(this.ue.body)
|
||||
.find(".checkSelected")
|
||||
.children("img")
|
||||
.attr(
|
||||
"_src",
|
||||
$(event.currentTarget)
|
||||
.find("img")
|
||||
.attr("src")
|
||||
);
|
||||
this.clearselectline();
|
||||
} else {
|
||||
if (
|
||||
($(event.currentTarget).find(".isvip").length > 0 &&
|
||||
!!Number(topnavInfo.userInfo.IsVip)) ||
|
||||
$(event.currentTarget).find(".isvip").length == 0
|
||||
) {
|
||||
var range = this.ue.selection.getRange().cloneContents(); //获得选区【秒刷】
|
||||
var _this =
|
||||
$(event.currentTarget)[0].nodeName.toLowerCase() == "p"
|
||||
? $(event.currentTarget)
|
||||
.parents(".item")
|
||||
.find(".KolEditor:first")
|
||||
.clone()
|
||||
: $(event.currentTarget)
|
||||
.find(".KolEditor:first")
|
||||
.clone();
|
||||
if (this.type == "mysign") {
|
||||
//侧边栏在我的签名上，点击为添加签名
|
||||
//头部
|
||||
if ($(this.ue.body).find(".materialTop").length > 0) {
|
||||
$(this.ue.body)
|
||||
.find(".materialTop")
|
||||
.empty()
|
||||
.append(
|
||||
$(event.currentTarget)
|
||||
.find(".materialTop")
|
||||
.html()
|
||||
);
|
||||
} else {
|
||||
var _node = this.ue.body.firstChild;
|
||||
$(event.currentTarget)
|
||||
.find(".materialTop")
|
||||
.clone()
|
||||
.insertBefore($(_node));
|
||||
}
|
||||
// 尾部
|
||||
if ($(this.ue.body).find(".materialBottom").length > 0) {
|
||||
$(this.ue.body)
|
||||
.find(".materialBottom")
|
||||
.empty()
|
||||
.append(
|
||||
$(event.currentTarget)
|
||||
.find(".materialBottom")
|
||||
.html()
|
||||
);
|
||||
} else {
|
||||
$(this.ue.body).append(
|
||||
$(event.currentTarget)
|
||||
.find(".materialBottom")
|
||||
.clone()[0]
|
||||
);
|
||||
}
|
||||
} else {
|
||||
if (range != null) {
|
||||
this.secondBrush(_this);
|
||||
} else {
|
||||
var _style = $(event.currentTarget)
|
||||
.find(".KolEditor:first")
|
||||
.attr("style");
|
||||
this.ue.execCommand(
|
||||
"inserthtml",
|
||||
'<section class="KolEditor" style="' +
|
||||
_style +
|
||||
'">' +
|
||||
_this.html() +
|
||||
"</section>"
|
||||
);
|
||||
// ====== 带序号的素材，点击实现数字自增 ======
|
||||
if (
|
||||
$(event.currentTarget)
|
||||
.find(".KolEditor:first")
|
||||
.find("p.count").length > 0
|
||||
) {
|
||||
$(event.currentTarget)
|
||||
.find(".KolEditor:first")
|
||||
.find("p.count")
|
||||
.each(function() {
|
||||
var count = Number($(this).html());
|
||||
var _length = $(this).html().length;
|
||||
if (String(count + 1).length < _length) {
|
||||
var zero = new Array(
|
||||
_length - String(count + 1).length + 1
|
||||
).join("0");
|
||||
$(this).html(zero + (count + 1));
|
||||
} else {
|
||||
$(this).html(count + 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.clearselectline();
|
||||
} else {
|
||||
this.dialog.vipTips = true;
|
||||
this.vipMessage = "成为VIP会员，VIP素材免费用";
|
||||
$(".purchvip")
|
||||
.find("button")
|
||||
.attr({ statsmark: "查看VIP特权关闭", statstype: "2" });
|
||||
}
|
||||
}
|
||||
},
|
||||
// 删除选中框
|
||||
clearselectline() {
|
||||
$(this.ue.body)
|
||||
.find(".checkSelected")
|
||||
.removeClass("checkSelected");
|
||||
},
|
||||
//秒刷代码
|
||||
secondBrush(_this) {
|
||||
var rangeLength = this.ue.selection.getRange().endOffset;
|
||||
var textLength = _this.find("p").length;
|
||||
var imgLength = _this.find("img.KolImg").length;
|
||||
var startIndex = 0;
|
||||
var imgIndex = 0;
|
||||
var innertext = _this.html();
|
||||
this.ue.selection
|
||||
.getRange()
|
||||
.adjustmentBoundary()
|
||||
.traversal(function(node) {
|
||||
var isHasImg = 0;
|
||||
if (node.localName == "img" || $(node).find("img").length > 0) {
|
||||
var imgsrc = node.currentSrc
|
||||
? node.currentSrc
|
||||
: $(node)
|
||||
.find("img")
|
||||
.attr("src");
|
||||
_this
|
||||
.find("img.KolImg")
|
||||
.eq(imgIndex)
|
||||
.attr("src", imgsrc);
|
||||
isHasImg = 1;
|
||||
imgIndex++;
|
||||
} else {
|
||||
if (node.localName != "br" && $.trim(node.textContent) != "") {
|
||||
if (startIndex >= textLength) {
|
||||
var beforeStyle = _this.find("p:last").attr("style");
|
||||
_this
|
||||
.find("p:last")
|
||||
.after(
|
||||
'<p style="' +
|
||||
beforeStyle +
|
||||
'">' +
|
||||
node.textContent +
|
||||
"</p>"
|
||||
);
|
||||
} else {
|
||||
_this
|
||||
.find("p")
|
||||
.eq(startIndex)
|
||||
.html(node.textContent);
|
||||
}
|
||||
startIndex++;
|
||||
}
|
||||
}
|
||||
});
|
||||
this.ue.execCommand(
|
||||
"inserthtml",
|
||||
'<section class="KolEditor">' + _this.html() + "</section>"
|
||||
);
|
||||
},
|
||||
// 分块使用
|
||||
showTemplateAllSection() {
|
||||
this.fold = false;
|
||||
const self = this;
|
||||
// 为分块绑定事件
|
||||
$(document)
|
||||
.off("mouseenter.part")
|
||||
.on(
|
||||
"mouseenter.part",
|
||||
".partContent .KolEditor:first .KolEditor",
|
||||
function() {
|
||||
$(this).css("position", "relative");
|
||||
$(this).append(
|
||||
'<section class="usePart" style="position:absolute;left:-10px;top:-10px;width:calc(100% + 20px);height:calc(100% + 20px);background-color:rgba(0,0,0,0.4);z-index:88;border-radius:4px;"><i class="fa fa-arrow-circle-o-right" data-type="fa-arrow-circle-o-right" style="cursor:pointer;font-size:40px;color:#fff;display:inline-block;position:absolute;left:50%;top:50%;margin-left:-20px;margin-top:-20px;"></i></section>'
|
||||
);
|
||||
$(".usePart").click(function(event) {
|
||||
var range = self.ue.selection.getRange().cloneContents();
|
||||
var _this = $(this).parents(".KolEditor:first");
|
||||
$(this).remove();
|
||||
if (range != null) {
|
||||
secondBrush(_this.clone());
|
||||
} else {
|
||||
self.ue.execCommand(
|
||||
"inserthtml",
|
||||
'<section class="KolEditor">' + _this.html() + "</section>"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
);
|
||||
|
||||
$(document).on(
|
||||
"mouseleave",
|
||||
".partContent .KolEditor:first .KolEditor",
|
||||
function() {
|
||||
$(this)
|
||||
.find(".usePart")
|
||||
.remove();
|
||||
}
|
||||
);
|
||||
},
|
||||
// 退出分块使用
|
||||
quitUsePart() {
|
||||
this.fold = true;
|
||||
},
|
||||
useAll: function() {
|
||||
if (this.datas.is_vip) {
|
||||
this.ue.execCommand("inserthtml", this.datas.content);
|
||||
} else {
|
||||
this.showAlert = true;
|
||||
this.alertText = "成为VIP会员，VIP素材免费用";
|
||||
}
|
||||
},
|
||||
hideAlert() {
|
||||
console.log("goto vippage");
|
||||
},
|
||||
collectItem() {
|
||||
if (!this.isLogin) {
|
||||
this.showLoginDialog = true;
|
||||
return;
|
||||
}
|
||||
this.IsCollect = !this.IsCollect;
|
||||
},
|
||||
hideQrcodeDia() {
|
||||
console.log("close dialog qroce");
|
||||
}
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
// template mertial
|
||||
type: String,
|
||||
default: "mertial"
|
||||
},
|
||||
html: {
|
||||
// html
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
datas: {
|
||||
// 全部的data
|
||||
type: Object,
|
||||
default: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState("user", ["user"]),
|
||||
isTemplate() {
|
||||
return !!this.datas.IfSystem;
|
||||
},
|
||||
isLogin() {
|
||||
return !!this.user;
|
||||
},
|
||||
isVip() {
|
||||
return !!this.user;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
amAlert,
|
||||
LoginDialog
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.item {
|
||||
margin-top: 10px;
|
||||
// 分块使用
|
||||
.templateCover {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
i.media {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
color: #f7ba2a;
|
||||
font-size: 20px;
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
padding-left: 8px;
|
||||
line-height: 35px;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
border-bottom-left-radius: 100%;
|
||||
display: none;
|
||||
z-index: 99;
|
||||
}
|
||||
i.fa-trash-o {
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: none;
|
||||
}
|
||||
.isvip {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
z-index: 99;
|
||||
width: 25px;
|
||||
}
|
||||
i.fa-times {
|
||||
color: #ff4949 !important;
|
||||
}
|
||||
.item {
|
||||
&:hover {
|
||||
transition: all 0.3s ease;
|
||||
i.media {
|
||||
display: block;
|
||||
}
|
||||
i.fa-trash-o {
|
||||
display: block;
|
||||
}
|
||||
.isvip {
|
||||
display: block;
|
||||
}
|
||||
.templateSelect {
|
||||
display: block;
|
||||
}
|
||||
i.pasterAbout {
|
||||
display: block !important;
|
||||
}
|
||||
}
|
||||
&.item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
padding: 10px 10px;
|
||||
cursor: pointer;
|
||||
min-height: 60px;
|
||||
border-radius: 2px;
|
||||
border-top: none;
|
||||
margin-bottom: 4px;
|
||||
overflow: hidden;
|
||||
transition: background, 0.3s, ease;
|
||||
&.designTemplate,
|
||||
&.template {
|
||||
.mytemplate-Name,
|
||||
.mytemplate-title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&.draft,
|
||||
&.myTemplate,
|
||||
&.mysign {
|
||||
max-height: 240px;
|
||||
border: 1px solid #e6e6e6;
|
||||
padding: 0px;
|
||||
> div {
|
||||
> div {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
.mytemplate-Name {
|
||||
height: 33px;
|
||||
line-height: 33px;
|
||||
background-color: #f9fafc;
|
||||
color: #333333;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 12px;
|
||||
}
|
||||
.mytemplate-summary {
|
||||
line-height: 1.5px;
|
||||
background-color: #f9fafc;
|
||||
color: #333333;
|
||||
font-size: 12px;
|
||||
box-sizing: border-box;
|
||||
padding: 5px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
.templateSelect {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.4);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 88;
|
||||
> p {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
button {
|
||||
&:hover {
|
||||
i,
|
||||
span {
|
||||
color: #f7ba2a;
|
||||
}
|
||||
}
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
> span {
|
||||
i {
|
||||
font-size: 40px;
|
||||
width: 40px;
|
||||
color: #fff;
|
||||
line-height: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
}
|
||||
> span {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mytemplate {
|
||||
border-width: 1px;
|
||||
border-color: rgb(230, 230, 230);
|
||||
border-style: solid;
|
||||
border-radius: 4px;
|
||||
padding: 0px;
|
||||
margin-top: 12px;
|
||||
> div > div {
|
||||
margin: 12px;
|
||||
max-height: 180px;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
p.mytemplate-title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0px 12px;
|
||||
background-color: #f9fafc;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
p.mytemplate-summary {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding: 0px 12px;
|
||||
background-color: #f9fafc;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
p.mytemplate-title {
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
padding-left: 12px;
|
||||
background-color: #f9fafc;
|
||||
font-size: 14px;
|
||||
color: #333333;
|
||||
}
|
||||
p.designTemplat-price {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 20px;
|
||||
margin-top: 6px;
|
||||
span {
|
||||
&:nth-child(1) {
|
||||
font-size: 14px;
|
||||
color: #666666;
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
font-size: 20px;
|
||||
color: #ff5e45;
|
||||
i {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
qqmusic {
|
||||
min-height: 60px;
|
||||
width: 100%;
|
||||
border: 1px solid #e7e7ed;
|
||||
margin: 17px 1px 16px 0;
|
||||
display: block;
|
||||
// background-image: url("../../javascript/lib/ueditor/themes/default/images/icon_qqmusic_audio_default.png");
|
||||
background-position: right center;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
padding: 9px 12px;
|
||||
}
|
||||
qqmusic:before {
|
||||
content: "QQ音乐";
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
qqmusic:after {
|
||||
content: "QQ音乐--预览查看";
|
||||
color: #8d8d8d;
|
||||
display: block;
|
||||
text-align: left;
|
||||
}
|
||||
.icon-VIP {
|
||||
color: #ef2a36;
|
||||
font-size: 35px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 7px;
|
||||
}
|
||||
</style>
|
||||
134
vueTem/src/components/BaseQrcodeDialog.vue
Normal file
134
vueTem/src/components/BaseQrcodeDialog.vue
Normal file
@@ -0,0 +1,134 @@
|
||||
<template>
|
||||
<div class="qrCode-layer f--hcc" v-show="showStatus">
|
||||
<div class="qrCode">
|
||||
<div class="qrCode-header f--hlc">
|
||||
<span class="title-icon"></span>
|
||||
<span class="flex-1">预览二维码</span>
|
||||
<span class="close-icon" @click="close"></span>
|
||||
</div>
|
||||
<div class="qrCode-content">
|
||||
<div class="qrCode-div">
|
||||
<div class="qrCode-bg">
|
||||
<img :src="src" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<p>扫码查看手机效果</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showStatus: this.value,
|
||||
src: ""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeSwitch() {
|
||||
this.emitSwitch();
|
||||
},
|
||||
close() {
|
||||
this.showStatus = false;
|
||||
this.$emit("update:show", this.showStatus);
|
||||
this.$emit("close");
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
// 地址
|
||||
type: String,
|
||||
default: false
|
||||
},
|
||||
show: {
|
||||
// 状态
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.src = newVal;
|
||||
},
|
||||
show(newVal) {
|
||||
this.showStatus = newVal;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.qrCode-layer {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
.qrCode {
|
||||
box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-webkit-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-moz-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-ms-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
-o-box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
|
||||
border-radius: 2px;
|
||||
width: 214px;
|
||||
background: #353535;
|
||||
.qrCode-header {
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
background: #545454;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
.title-icon {
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: url(../images/icon1.svg) no-repeat -1520px -240px;
|
||||
display: block;
|
||||
}
|
||||
.close-icon {
|
||||
cursor: pointer;
|
||||
width: 30px;
|
||||
height: 40px;
|
||||
background: url(../images/icon1.svg) no-repeat -1203px -235px;
|
||||
display: block;
|
||||
&.close-icon:hover {
|
||||
background-position: -1203px -275px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qrCode-content {
|
||||
width: 100%;
|
||||
p {
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: #b5b5b5;
|
||||
padding: 0 10px;
|
||||
margin: 0 0 9px;
|
||||
}
|
||||
.qrCode-div {
|
||||
border-radius: 2px;
|
||||
width: 194px;
|
||||
height: 194px;
|
||||
margin: 10px auto;
|
||||
padding: 5px;
|
||||
background: #545454;
|
||||
.qrCode-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #d2d2d2;
|
||||
padding: 5px;
|
||||
img {
|
||||
border-style: none;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
55
vueTem/src/components/BaseSwitchInput.vue
Normal file
55
vueTem/src/components/BaseSwitchInput.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="f--hlc ant-row ant-form-item" :class="{ 'ant-form-full':full,'ant-form-half':!full} ">
|
||||
<div class="ant-col-l ant-form-item-label">
|
||||
<label>
|
||||
<slot name="label">
|
||||
{{label}}
|
||||
</slot>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ant-col-r">
|
||||
<div class="ant-form-item-control" style="text-align: left;">
|
||||
<el-switch v-model="status" active-color="#ffa800" inactive-color="#151515" style="margin-top:3px;" @change="changeSwitch" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
status: this.value
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeSwitch() {
|
||||
this.emitSwitch();
|
||||
},
|
||||
emitSwitch() {
|
||||
this.$emit("changeSwitch", this.status);
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
// 状态
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
full: {
|
||||
// 容器全宽或者半宽
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.status = newVal;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
223
vueTem/src/components/BaseToolInput.vue
Normal file
223
vueTem/src/components/BaseToolInput.vue
Normal file
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div
|
||||
class="f--hlc ant-row ant-form-item"
|
||||
:class="{ 'ant-form-full':full,'ant-form-half':!full} "
|
||||
>
|
||||
<div class="ant-col-l ant-form-item-label">
|
||||
<label>
|
||||
<slot name="label">
|
||||
{{label}}
|
||||
</slot>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ant-col-r">
|
||||
<div class="ant-form-item-control">
|
||||
<div :class="['ant-input-'+icon]">
|
||||
<div
|
||||
class="ant-input-number ant-input-number-sm"
|
||||
:class="{'input-com-number':fullInput,'slider-input':!fullInput}"
|
||||
>
|
||||
<div
|
||||
class="ant-input-number-handler-wrap"
|
||||
v-if="count"
|
||||
>
|
||||
<a
|
||||
class="ant-input-number-handler ant-input-number-handler-up "
|
||||
:class="{'ant-input-number-handler-down-disabled':maxDisabled}"
|
||||
@keydown.enter="increase"
|
||||
@click="increase"
|
||||
>
|
||||
<span class="ant-input-number-handler-up-inner"></span>
|
||||
</a>
|
||||
<a
|
||||
class="ant-input-number-handler ant-input-number-handler-down "
|
||||
:class="{'ant-input-number-handler-down-disabled':minDisabled}"
|
||||
@keydown.enter="decrease"
|
||||
@click="decrease"
|
||||
>
|
||||
<span class="ant-input-number-handler-down-inner"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="ant-input-number-input-wrap">
|
||||
<input
|
||||
class="ant-input-number-input"
|
||||
:step="step"
|
||||
:max="max"
|
||||
:min="min"
|
||||
:value="currentValue"
|
||||
@keydown.up="increase($event)"
|
||||
@keydown.down="decrease($event)"
|
||||
ref="input"
|
||||
@input="inputEventChangeVal($event)"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-slider slider-per"
|
||||
v-if="showSlider"
|
||||
>
|
||||
<el-slider
|
||||
v-model="currentValue"
|
||||
@change="setCurrentValue"
|
||||
></el-slider>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentValue: parseFloat(this.value)
|
||||
};
|
||||
},
|
||||
props: {
|
||||
full: {
|
||||
// 容器全宽或者半宽
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
count: {
|
||||
// 是否有计数功能
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
icon: {
|
||||
// 单位图标 rate:% px:px degree:度
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
step: {
|
||||
// 点击一次数值增长或者减少的数值
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
max: {
|
||||
// 最大
|
||||
type: [Number, String],
|
||||
default: 9999
|
||||
},
|
||||
min: {
|
||||
// 最小
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
value: {
|
||||
// input值
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
showSlider: {
|
||||
// 是否显示滑动条
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
label: {
|
||||
// 文字
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
increase(e) {
|
||||
if (!this.count || this.maxDisabled) return;
|
||||
const value = this.value || 0;
|
||||
const newVal = this._increase(value, this.step);
|
||||
this.setCurrentValue(newVal);
|
||||
e.currentTarget.focus();
|
||||
},
|
||||
decrease(e) {
|
||||
if (!this.count || this.minDisabled) return;
|
||||
const value = this.value || 0;
|
||||
const newVal = this._decrease(value, this.step);
|
||||
this.setCurrentValue(newVal);
|
||||
e.currentTarget.focus();
|
||||
},
|
||||
|
||||
_increase(val, step) {
|
||||
if (typeof val !== "number" && val !== undefined)
|
||||
return this.currentValue;
|
||||
const precisionFactor = Math.pow(10, this.precision);
|
||||
return this.toPrecision(
|
||||
(precisionFactor * val + precisionFactor * step) / precisionFactor
|
||||
);
|
||||
},
|
||||
_decrease(val, step) {
|
||||
if (typeof val !== "number" && val !== undefined)
|
||||
return this.currentValue;
|
||||
const precisionFactor = Math.pow(10, this.precision);
|
||||
return this.toPrecision(
|
||||
(precisionFactor * val - precisionFactor * step) / precisionFactor
|
||||
);
|
||||
},
|
||||
getPrecision(value) {
|
||||
if (value === undefined) return 0;
|
||||
const valueString = value.toString();
|
||||
const dotPosition = valueString.indexOf(".");
|
||||
let precision = 0;
|
||||
if (dotPosition !== -1) {
|
||||
precision = valueString.length - dotPosition - 1;
|
||||
}
|
||||
return precision;
|
||||
},
|
||||
setCurrentValue(newVal) {
|
||||
const oldVal = this.currentValue;
|
||||
if (newVal >= this.max) newVal = parseFloat(this.max ? this.max : 0);
|
||||
if (newVal <= this.min) newVal = parseFloat(this.min ? this.min : 0);
|
||||
// if (oldVal === newVal) {
|
||||
// this.$refs.input.setCurrentValue(this.currentValue);
|
||||
// return;
|
||||
// }
|
||||
if (this.count) {
|
||||
this.$emit("input", newVal);
|
||||
this.$emit("change", newVal, oldVal);
|
||||
this.currentValue = parseFloat(newVal ? newVal : 0);
|
||||
} else {
|
||||
this.$emit("input", parseFloat(newVal));
|
||||
this.$emit("change", parseFloat(newVal), oldVal);
|
||||
this.currentValue = parseFloat(newVal ? newVal : 0);
|
||||
}
|
||||
},
|
||||
inputEventChangeVal(e) {
|
||||
const newVal = parseFloat(
|
||||
e.currentTarget.value ? e.currentTarget.value : 0
|
||||
);
|
||||
this.setCurrentValue(newVal);
|
||||
e.currentTarget.focus();
|
||||
},
|
||||
toPrecision(num, precision) {
|
||||
if (precision === undefined) precision = this.precision;
|
||||
return parseFloat(parseFloat(Number(num ? num : 0).toFixed(precision)));
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
minDisabled() {
|
||||
return this._decrease(this.value, this.step) < this.min;
|
||||
},
|
||||
maxDisabled() {
|
||||
return this._increase(this.value, this.step) > this.max;
|
||||
},
|
||||
precision() {
|
||||
const { value, step, getPrecision } = this;
|
||||
return Math.max(getPrecision(value), getPrecision(step));
|
||||
},
|
||||
fullInput() {
|
||||
// input全宽或者半宽
|
||||
return !this.showSlider && this.full;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(newVal) {
|
||||
this.currentValue = parseFloat(newVal);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../styles/css/toolbar";
|
||||
@import "../styles/css/toolbarfont";
|
||||
</style>
|
||||
57
vueTem/src/components/BaseToolTextarea.vue
Normal file
57
vueTem/src/components/BaseToolTextarea.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<div data-item="value" class="f--hlc ant-row ant-form-item ant-form-full">
|
||||
<div class="ant-col-l ant-form-item-label">
|
||||
<label>
|
||||
<slot name="label">
|
||||
{{label}}
|
||||
</slot>
|
||||
</label>
|
||||
</div>
|
||||
<div class="ant-col-r">
|
||||
<div class="ant-form-item-control">
|
||||
<div class="input-com ">
|
||||
<div>
|
||||
<div class="input-com-wrapper">
|
||||
<textarea class="input-com-input input-com-textarea" type="textarea" :value='currentValue' @blur="changeTextarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeTextarea() {
|
||||
this.setCurrentValue();
|
||||
},
|
||||
setCurrentValue() {
|
||||
this.$emit("changeTextarea", this.value);
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
value(newVal) {
|
||||
this.currentValue = newVal
|
||||
}
|
||||
},
|
||||
props: {
|
||||
value: {
|
||||
// input值
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
},
|
||||
label: {
|
||||
type: [String, Number],
|
||||
default: ""
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
128
vueTem/src/components/LandingPage.vue
Normal file
128
vueTem/src/components/LandingPage.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div id="wrapper">
|
||||
<img id="logo" src="~@/assets/logo.png" alt="electron-vue">
|
||||
<main>
|
||||
<div class="left-side">
|
||||
<span class="title">
|
||||
Welcome to your new project!
|
||||
</span>
|
||||
<system-information></system-information>
|
||||
</div>
|
||||
|
||||
<div class="right-side">
|
||||
<div class="doc">
|
||||
<div class="title">Getting Started</div>
|
||||
<p>
|
||||
electron-vue comes packed with detailed documentation that covers everything from
|
||||
internal configurations, using the project structure, building your application,
|
||||
and so much more.
|
||||
</p>
|
||||
<button @click="open('https://simulatedgreg.gitbooks.io/electron-vue/content/')">Read the Docs</button><br><br>
|
||||
</div>
|
||||
<div class="doc">
|
||||
<div class="title alt">Other Documentation</div>
|
||||
<button class="alt" @click="open('https://electron.atom.io/docs/')">Electron</button>
|
||||
<button class="alt" @click="open('https://vuejs.org/v2/guide/')">Vue.js</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import SystemInformation from './LandingPage/SystemInformation'
|
||||
|
||||
export default {
|
||||
name: 'landing-page',
|
||||
components: { SystemInformation },
|
||||
methods: {
|
||||
open (link) {
|
||||
this.$electron.shell.openExternal(link)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body { font-family: 'Source Sans Pro', sans-serif; }
|
||||
|
||||
#wrapper {
|
||||
background:
|
||||
radial-gradient(
|
||||
ellipse at top left,
|
||||
rgba(255, 255, 255, 1) 40%,
|
||||
rgba(229, 229, 229, .9) 100%
|
||||
);
|
||||
height: 100vh;
|
||||
padding: 60px 80px;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
#logo {
|
||||
height: auto;
|
||||
margin-bottom: 20px;
|
||||
width: 420px;
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
main > div { flex-basis: 50%; }
|
||||
|
||||
.left-side {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
color: #555;
|
||||
font-size: 23px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #2c3e50;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.title.alt {
|
||||
font-size: 18px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.doc p {
|
||||
color: black;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.doc button {
|
||||
font-size: .8em;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
padding: 0.75em 2em;
|
||||
border-radius: 2em;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
background-color: #4fc08d;
|
||||
transition: all 0.15s ease;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #4fc08d;
|
||||
}
|
||||
|
||||
.doc button.alt {
|
||||
color: #42b983;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
61
vueTem/src/config/configSample.js
Normal file
61
vueTem/src/config/configSample.js
Normal file
@@ -0,0 +1,61 @@
|
||||
/* eslint-disable comma-dangle */
|
||||
/* eslint-disable quotes */
|
||||
/*
|
||||
* @Description: 优秀模板示例数据
|
||||
* @Author: jinguoqiang
|
||||
* @Date: 2020-04-26 19:14:14
|
||||
* @LastEditors: jinguoqiang
|
||||
* @LastEditTime: 2020年10月30日17:38:50
|
||||
*/
|
||||
|
||||
export const GameSyncTypeEnum = {
|
||||
SYNC: '1',
|
||||
DISTRIBUTE: '2',
|
||||
BOTH: '3'
|
||||
}
|
||||
export const GradeEnum = {
|
||||
ONE: 1,
|
||||
TWO: 2,
|
||||
THREE: 3
|
||||
}
|
||||
|
||||
export const CourseStepEnum = {
|
||||
NORMLAL: '1', // 课中作答
|
||||
CONCENTRATION: '2', // 专注力游戏
|
||||
BIG_GAME: '3' // 大游戏
|
||||
}
|
||||
|
||||
export const AuthorEnum = {
|
||||
JGQ: '小明',
|
||||
CGC: '小红',
|
||||
WQD: '珍妮',
|
||||
HJS: '项羽',
|
||||
XJT: '小王子'
|
||||
}
|
||||
|
||||
export const SubjectEnum = {
|
||||
Math: '数学',
|
||||
Chinese: '语文'
|
||||
}
|
||||
export const sampleData = [
|
||||
{
|
||||
name: 'helloworld1',
|
||||
title: '场景1',
|
||||
description: '第一个场景',
|
||||
grade: [GradeEnum.ONE, GradeEnum.TWO, GradeEnum.THREE],
|
||||
tip: CourseStepEnum.NORMLAL,
|
||||
subject: SubjectEnum.Math,
|
||||
author: AuthorEnum.JGQ,
|
||||
type: GameSyncTypeEnum.BOTH
|
||||
},
|
||||
{
|
||||
name: 'helloworld2',
|
||||
title: '场景2',
|
||||
description: '第二个场景',
|
||||
grade: [GradeEnum.ONE, GradeEnum.TWO, GradeEnum.THREE],
|
||||
tip: CourseStepEnum.NORMLAL,
|
||||
subject: SubjectEnum.Math,
|
||||
author: AuthorEnum.JGQ,
|
||||
type: GameSyncTypeEnum.BOTH
|
||||
},
|
||||
]
|
||||
24
vueTem/src/const/event.js
Normal file
24
vueTem/src/const/event.js
Normal file
@@ -0,0 +1,24 @@
|
||||
/*
|
||||
* @Author: jinguoqiang
|
||||
* @Date: 2020-04-27 11:21:19
|
||||
* @LastEditTime: 2020-04-27 11:21:24
|
||||
* @LastEditors: jinguoqiang
|
||||
*/
|
||||
// game 发消息给 electron
|
||||
export let GAME2WEB_EVENTTYPE = {
|
||||
ON_PAGE_CHANGE_SUCCESS: 'ON_PAGE_CHANGE_SUCCESS',
|
||||
SELECT_NODE: 'SELECT_NODE',
|
||||
GAMENODE_MOVED: 'GAMENODE_MOVED',
|
||||
GAMENODE_MOVEEND: 'GAMENODE_MOVEEND',
|
||||
GAMESCENE_LOADED: 'GAMESCENE_LOADED'
|
||||
}
|
||||
|
||||
// electron 发消息给 game
|
||||
export let E2G_EVENTTYPE = {
|
||||
CREATOR_INIT: 'CREATOR_INIT', // 初始化游戏场景
|
||||
LOAD_SCENE: 'LOAD_SCENE', // 加载场景
|
||||
LOAD_GAME: 'LOAD_GAME', // 加载小游戏 （prefab）
|
||||
UNLOAD_GAME: 'UNLOAD_GAME', // 卸载小游戏 （prefab）
|
||||
UPDATE_RESOLUTION: 'UPDATE_RESOLUTION', // 调整分辨率
|
||||
SET_NODEATTRIBUTE: 'SET_NODEATTRIBUTE' // 设置节点属性值
|
||||
}
|
||||
54
vueTem/src/images/1.svg
Normal file
54
vueTem/src/images/1.svg
Normal file
@@ -0,0 +1,54 @@
|
||||
<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" width="180" height="60" viewBox="0 0 180 60">
|
||||
<defs>
|
||||
<style>
|
||||
.cls-1, .cls-2 {
|
||||
fill: #858585;
|
||||
}
|
||||
|
||||
.cls-2 {
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
|
||||
.cls-3 {
|
||||
fill: #151515;
|
||||
}
|
||||
|
||||
.cls-4 {
|
||||
fill: #fff;
|
||||
}
|
||||
</style>
|
||||
</defs>
|
||||
<title>属性面板图标</title>
|
||||
<g>
|
||||
<path class="cls-1" d="M5.87,10.94v2.83h-1V6.2H7a2.8,2.8,0,0,1,1.9.59,2.12,2.12,0,0,1,.68,1.69,2.28,2.28,0,0,1-.79,1.8,2.75,2.75,0,0,1-2,.65Zm0-3.88v3h.9a2,2,0,0,0,1.36-.4,1.45,1.45,0,0,0,.46-1.15q0-1.46-1.73-1.46Z"/>
|
||||
<path class="cls-1" d="M16,13.77H14.83l-1.69-2.85a2.92,2.92,0,0,1-.17-.39h0s-.06.16-.18.4L11,13.77H9.84L12.35,10,10,6.2h1.2l1.49,2.62a5.17,5.17,0,0,1,.26.54h0a6.24,6.24,0,0,1,.29-.56L14.86,6.2H16L13.62,10Z"/>
|
||||
</g>
|
||||
<path class="cls-2" d="M77.5,5.5v-3h-3v1h-3v-1h-3v1h-3v-1h-3v3h1v3h-1v3h1v3h-1v3h3v-1h3v1h3v-1h3v1h3v-3h-1v-3h1v-3h-1v-3Zm-2,3h-1v3h1v3h-1v1h-3v-1h-3v1h-3v-1h-1v-3h1v-3h-1v-3h1v-1h3v1h3v-1h3v1h1Zm-7,3h3v-3h-3Z"/>
|
||||
<path class="cls-1" d="M92.83,10a1.62,1.62,0,1,0-1.62,1.67A1.65,1.65,0,0,0,92.83,10ZM91.21,2.5A7.4,7.4,0,0,0,83.93,10H81.5l3.24,3.33L88,10H85.55a5.67,5.67,0,1,1,11.33,0,5.75,5.75,0,0,1-5.67,5.83,5.59,5.59,0,0,1-3.29-1.08L86.78,16a7.16,7.16,0,0,0,4.44,1.55A7.4,7.4,0,0,0,98.5,10,7.4,7.4,0,0,0,91.21,2.5Z"/>
|
||||
<path class="cls-1" d="M112.89,13.5h-3.11a3.32,3.32,0,0,1-3.11-3.5,3.88,3.88,0,0,1,.11-.87h1.45a.67.67,0,0,1,.2,0,1.89,1.89,0,0,0-.2.83,1.66,1.66,0,0,0,1.56,1.75h3.11A1.66,1.66,0,0,0,114.44,10a1.66,1.66,0,0,0-1.56-1.75h-1.11a4.33,4.33,0,0,0-1.25-1.75h2.36A3.32,3.32,0,0,1,116,10,3.32,3.32,0,0,1,112.89,13.5Zm-6.67-1.75h-1.11A1.66,1.66,0,0,1,103.56,10a1.66,1.66,0,0,1,1.56-1.75h3.11A1.66,1.66,0,0,1,109.78,10a1.9,1.9,0,0,1-.19.83.66.66,0,0,0,.19,0h1.45a3.83,3.83,0,0,0,.11-.87,3.32,3.32,0,0,0-3.11-3.5h-3.11A3.32,3.32,0,0,0,102,10a3.32,3.32,0,0,0,3.11,3.5h2.36A4.33,4.33,0,0,1,106.22,11.75Z"/>
|
||||
<path class="cls-1" d="M33.5,3.83A1.5,1.5,0,1,1,32,5.33a1.5,1.5,0,0,1,1.5-1.5m0-1A2.5,2.5,0,1,0,36,5.33a2.5,2.5,0,0,0-2.5-2.5Z"/>
|
||||
<g>
|
||||
<path class="cls-1" d="M50.91,9.48a2.22,2.22,0,0,0,.53-1.53A2.15,2.15,0,0,0,51,6.46a1.73,1.73,0,0,0-1.35-.54,1.84,1.84,0,0,0-1.43.59,2.25,2.25,0,0,0-.53,1.56,2.1,2.1,0,0,0,.5,1.46,1.73,1.73,0,0,0,1.34.56A1.81,1.81,0,0,0,50.91,9.48Zm-2-2.39a.79.79,0,0,1,.67-.31.75.75,0,0,1,.64.3,1.47,1.47,0,0,1,.24.9,1.52,1.52,0,0,1-.24.92.76.76,0,0,1-.65.3.78.78,0,0,1-.65-.29A1.41,1.41,0,0,1,48.65,8,1.47,1.47,0,0,1,48.9,7.1Z"/>
|
||||
<path class="cls-1" d="M55.48,10.33a1.73,1.73,0,0,0-1.35-.55,1.82,1.82,0,0,0-1.42.6,2.27,2.27,0,0,0-.53,1.56,2.11,2.11,0,0,0,.5,1.45A1.72,1.72,0,0,0,54,14a1.82,1.82,0,0,0,1.41-.59A2.2,2.2,0,0,0,56,11.84,2.18,2.18,0,0,0,55.48,10.33Zm-.75,2.44a.76.76,0,0,1-.65.31.78.78,0,0,1-.65-.3,1.4,1.4,0,0,1-.25-.88,1.5,1.5,0,0,1,.25-.92.79.79,0,0,1,.67-.31.75.75,0,0,1,.63.29,1.43,1.43,0,0,1,.24.89A1.52,1.52,0,0,1,54.72,12.78Z"/>
|
||||
<polygon class="cls-1" points="53.72 6.03 48.7 13.89 49.82 13.89 54.84 6.03 53.72 6.03"/>
|
||||
</g>
|
||||
<rect class="cls-3" x="100" y="24.5" width="18" height="11" rx="1.8" ry="1.8"/>
|
||||
<path class="cls-1" d="M112.89,33.5h-3.11a3.32,3.32,0,0,1-3.11-3.5,3.88,3.88,0,0,1,.11-.87h1.45a.67.67,0,0,1,.2,0,1.89,1.89,0,0,0-.2.83,1.66,1.66,0,0,0,1.56,1.75h3.11a1.76,1.76,0,0,0,0-3.5h-1.11a4.33,4.33,0,0,0-1.25-1.75h2.36A3.32,3.32,0,0,1,116,30,3.32,3.32,0,0,1,112.89,33.5Zm-6.67-1.75h-1.11a1.76,1.76,0,0,1,0-3.5h3.11A1.66,1.66,0,0,1,109.78,30a1.9,1.9,0,0,1-.19.83.66.66,0,0,0,.19,0h1.45a3.83,3.83,0,0,0,.11-.87,3.32,3.32,0,0,0-3.11-3.5h-3.11A3.32,3.32,0,0,0,102,30a3.32,3.32,0,0,0,3.11,3.5h2.36A4.33,4.33,0,0,1,106.22,31.75Z"/>
|
||||
<rect class="cls-3" x="100" y="44.5" width="18" height="11" rx="1.8" ry="1.8"/>
|
||||
<path class="cls-4" d="M112.89,53.5h-3.11a3.32,3.32,0,0,1-3.11-3.5,3.88,3.88,0,0,1,.11-.87h1.45a.67.67,0,0,1,.2,0,1.89,1.89,0,0,0-.2.83,1.66,1.66,0,0,0,1.56,1.75h3.11a1.76,1.76,0,0,0,0-3.5h-1.11a4.33,4.33,0,0,0-1.25-1.75h2.36a3.52,3.52,0,0,1,0,7Zm-6.67-1.75h-1.11a1.76,1.76,0,0,1,0-3.5h3.11A1.66,1.66,0,0,1,109.78,50a1.9,1.9,0,0,1-.19.83.66.66,0,0,0,.19,0h1.45a3.83,3.83,0,0,0,.11-.87,3.32,3.32,0,0,0-3.11-3.5h-3.11a3.52,3.52,0,0,0,0,7h2.36A4.33,4.33,0,0,1,106.22,51.75Z"/>
|
||||
<g>
|
||||
<rect class="cls-1" x="124.02" y="4" width="1" height="12"/>
|
||||
<rect class="cls-1" x="135.02" y="4" width="1" height="12"/>
|
||||
<rect class="cls-1" x="129.52" y="6.31" width="1" height="7.39" transform="translate(120.02 140.02) rotate(-90)"/>
|
||||
<polygon class="cls-1" points="125.02 9.91 128.02 7.41 128.02 12.41 125.02 9.91"/>
|
||||
<polygon class="cls-1" points="135.02 9.91 132.02 12.41 132.02 7.41 135.02 9.91"/>
|
||||
</g>
|
||||
<g>
|
||||
<rect class="cls-1" x="149.53" y="-1.5" width="1" height="12" transform="translate(154.53 -145.53) rotate(90)"/>
|
||||
<rect class="cls-1" x="149.53" y="9.5" width="1" height="12" transform="translate(165.53 -134.53) rotate(90)"/>
|
||||
<rect class="cls-1" x="149.53" y="6.31" width="1" height="7.39"/>
|
||||
<polygon class="cls-1" points="150.13 5 152.63 8 147.63 8 150.13 5"/>
|
||||
<polygon class="cls-1" points="150.13 15 147.63 12 152.63 12 150.13 15"/>
|
||||
</g>
|
||||
<path class="cls-1" d="M174.17,8.45h-.92a1.6,1.6,0,0,0-.47-1,1.67,1.67,0,0,0-1.11-.33,1.5,1.5,0,0,0-1,.28.87.87,0,0,0-.39.75.9.9,0,0,0,.52.78,8,8,0,0,0,1.26.47,5.05,5.05,0,0,1,1.56.67,1.74,1.74,0,0,1,.73,1.47c0,1.47-.86,2.22-2.57,2.22a2.38,2.38,0,0,1-2.61-2.48h.92a2,2,0,0,0,.5,1.22,1.75,1.75,0,0,0,1.16.33c1.08,0,1.63-.42,1.63-1.22a1,1,0,0,0-.58-.93,7.91,7.91,0,0,0-1.29-.46A4.73,4.73,0,0,1,170,9.6a1.6,1.6,0,0,1-.69-1.4A1.73,1.73,0,0,1,170,6.76a2.49,2.49,0,0,1,1.67-.54A2.23,2.23,0,0,1,174.17,8.45Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
BIN
vueTem/src/images/h-ruler.jpeg
Normal file
BIN
vueTem/src/images/h-ruler.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
2291
vueTem/src/images/icon1.svg
Normal file
2291
vueTem/src/images/icon1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 269 KiB |
26
vueTem/src/main.js
Normal file
26
vueTem/src/main.js
Normal file
@@ -0,0 +1,26 @@
|
||||
import Vue from 'vue'
|
||||
import ElementUI from 'element-ui'
|
||||
import 'element-ui/lib/theme-chalk/index.css'
|
||||
import './styles/css/common.scss'
|
||||
import './styles/css/element-variables.scss'
|
||||
import './styles/fonts/css/font-awesome.min.css'
|
||||
import Vuerify from 'vuerify'
|
||||
|
||||
import axios from 'axios'
|
||||
|
||||
import App from './App'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
|
||||
Vue.http = Vue.prototype.$http = axios
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(ElementUI)
|
||||
Vue.use(Vuerify)
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
components: { App },
|
||||
router,
|
||||
store,
|
||||
template: '<App/>'
|
||||
}).$mount('#app')
|
||||
25
vueTem/src/router/index.js
Normal file
25
vueTem/src/router/index.js
Normal file
@@ -0,0 +1,25 @@
|
||||
import Vue from 'vue'
|
||||
import Router from 'vue-router'
|
||||
|
||||
Vue.use(Router)
|
||||
|
||||
export default new Router({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'index',
|
||||
component: require('@/views/editor/editor').default,
|
||||
meta: {
|
||||
requireAuth: true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/index',
|
||||
name: 'index',
|
||||
component: require('@/views/editor/editor').default,
|
||||
meta: {
|
||||
requireAuth: true
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
12
vueTem/src/store/index.js
Normal file
12
vueTem/src/store/index.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
import modules from './modules'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules,
|
||||
plugins: [],
|
||||
strict: process.env.NODE_ENV !== 'production'
|
||||
})
|
||||
17
vueTem/src/store/modules/CCGameLoaded.js
Normal file
17
vueTem/src/store/modules/CCGameLoaded.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import { SET_CCGAME_LOADED } from '../mutation-types'
|
||||
|
||||
const state = {
|
||||
isloaded: false // 是否cocos已经初始化完毕
|
||||
}
|
||||
|
||||
const mutations = {
|
||||
[SET_CCGAME_LOADED] (state, res) {
|
||||
state.isloaded = true
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
state,
|
||||
mutations,
|
||||
namespaced: true
|
||||
}
|
||||
14
vueTem/src/store/modules/index.js
Normal file
14
vueTem/src/store/modules/index.js
Normal file
@@ -0,0 +1,14 @@
|
||||
/**
|
||||
* The file enables `@/store/index.js` to import all vuex modules
|
||||
* in a one-shot manner. There should not be any reason to edit this file.
|
||||
*/
|
||||
|
||||
const files = require.context('.', false, /\.js$/)
|
||||
const modules = {}
|
||||
|
||||
files.keys().forEach(key => {
|
||||
if (key === './index.js') return
|
||||
modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
|
||||
})
|
||||
|
||||
export default modules
|
||||
1
vueTem/src/store/mutation-types.js
Normal file
1
vueTem/src/store/mutation-types.js
Normal file
@@ -0,0 +1 @@
|
||||
export const SET_CCGAME_LOADED = 'SET_CCGAME_LOADED'
|
||||
250
vueTem/src/styles/css/common.scss
Normal file
250
vueTem/src/styles/css/common.scss
Normal file
@@ -0,0 +1,250 @@
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
*:before,
|
||||
*:after {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body,
|
||||
div,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
pre,
|
||||
code,
|
||||
form,
|
||||
fieldset,
|
||||
legend,
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
p,
|
||||
blockquote,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
// background: #2e2e2e;
|
||||
background: #F4F4F4;
|
||||
color: #555;
|
||||
font-size: 14px;
|
||||
cursor: default;
|
||||
font-family: "Arial", "Microsoft YaHei", "\9ED1\4F53", "\5B8B\4F53", sans-serif;
|
||||
}
|
||||
td,
|
||||
th,
|
||||
caption {
|
||||
font-size: 14px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: normal;
|
||||
font-size: 100%;
|
||||
}
|
||||
address,
|
||||
caption,
|
||||
cite,
|
||||
code,
|
||||
dfn,
|
||||
em,
|
||||
strong,
|
||||
th,
|
||||
var {
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
a {
|
||||
color: #555;
|
||||
text-decoration: none;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
vertical-align: -0.15em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
img {
|
||||
border: none;
|
||||
vertical-align: middle;
|
||||
}
|
||||
ol,
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
button {
|
||||
font: 14px "Arial", "Microsoft YaHei", "\9ED1\4F53", "\5B8B\4F53", sans-serif;
|
||||
}
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
html {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.clearfix:before,
|
||||
.clearfix:after {
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
.clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
/*公共类*/
|
||||
.fl {
|
||||
float: left;
|
||||
}
|
||||
.fr {
|
||||
float: right;
|
||||
}
|
||||
.al {
|
||||
text-align: left;
|
||||
}
|
||||
.ac {
|
||||
text-align: center;
|
||||
}
|
||||
.ar {
|
||||
text-align: right;
|
||||
}
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
/*input placeholder */
|
||||
::-webkit-input-placeholder {
|
||||
/* WebKit, Blink, Edge */
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(145, 158, 171, 1);
|
||||
line-height: 17px;
|
||||
}
|
||||
:-moz-placeholder {
|
||||
/* Mozilla Firefox 4 to 18 */
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(145, 158, 171, 1);
|
||||
line-height: 17px;
|
||||
}
|
||||
::-moz-placeholder {
|
||||
/* Mozilla Firefox 19+ */
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(145, 158, 171, 1);
|
||||
line-height: 17px;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
/* Internet Explorer 10-11 */
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: rgba(145, 158, 171, 1);
|
||||
line-height: 17px;
|
||||
}
|
||||
/* .icon-icon_folderchev{
|
||||
background-size: 522px 474px!important;
|
||||
} */
|
||||
// 公用样式
|
||||
#app {
|
||||
height: 100%;
|
||||
// background: #2e2e2e;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(../fonts/MaterialIcons-Regular.eot);
|
||||
/* For IE6-8 */
|
||||
src: local('Material Icons'), local('MaterialIcons-Regular'), url(../fonts/MaterialIcons-Regular.woff2) format('woff2'), url(../fonts/MaterialIcons-Regular.woff) format('woff'), url(../fonts/MaterialIcons-Regular.ttf) format('truetype');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.control {
|
||||
.mu-text-field-input {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// #PropertyView {
|
||||
// .el-slider__runway {
|
||||
// margin-bottom: 0 !important;
|
||||
// margin-top: 0 !important;
|
||||
// background-color: #151515 !important;
|
||||
// border-color: #232323 !important;
|
||||
// height: 4px !important;
|
||||
// }
|
||||
// .el-slider__bar {
|
||||
// height: 4px !important;
|
||||
// .el-slider__button-wrapper {
|
||||
// top: -17px !important;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
.el-color-dropdown {
|
||||
border: 1px solid rgb(21, 21, 21) !important;
|
||||
background: rgb(53, 53, 53) !important;
|
||||
border-radius: 8px !important;
|
||||
padding: 15px !important;
|
||||
}
|
||||
|
||||
.el-icon--right {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
top: 2px;
|
||||
}
|
||||
.el-icon--right {
|
||||
margin-left: 5px;
|
||||
}
|
||||
[class*=" el-icon-"],
|
||||
[class^="el-icon-"] {
|
||||
font-family: element-icons !important;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
175
vueTem/src/styles/css/element-variables.scss
Normal file
175
vueTem/src/styles/css/element-variables.scss
Normal file
@@ -0,0 +1,175 @@
|
||||
// .el-tooltip__popper.is-light {
|
||||
// background: #ffffff;
|
||||
// -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
// box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.2);
|
||||
// border-radius: 3px;
|
||||
// border: 0;
|
||||
// }
|
||||
|
||||
// .el-tabs__header {
|
||||
// background: #fff;
|
||||
// margin: 0;
|
||||
// line-height: 40px;
|
||||
// }
|
||||
|
||||
// .el-tabs__nav-wrap {
|
||||
// padding-left: 16px;
|
||||
// }
|
||||
|
||||
// .el-tabs__nav-wrap::after {
|
||||
// height: 1px;
|
||||
// background-color: rgba(224, 224, 224, 1);
|
||||
// }
|
||||
|
||||
// .el-tabs__item {
|
||||
// font-size: 14px;
|
||||
// font-weight: 400;
|
||||
// color: rgba(99, 115, 129, 1);
|
||||
// }
|
||||
|
||||
// .el-tabs--top,
|
||||
// .el-tabs__content,
|
||||
// .el-tab-pane {
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// .el-textarea__inner {
|
||||
// height: 400px;
|
||||
// padding: 5px 8px!important;
|
||||
// }
|
||||
|
||||
// .left-panel /deep/ .el-tabs__content {
|
||||
// overflow-y: auto;
|
||||
// overflow-x: hidden;
|
||||
// height: calc(100% - 70px);
|
||||
// }
|
||||
// .right-panel /deep/ .el-tabs__content {
|
||||
// overflow-y: auto;
|
||||
// overflow-x: hidden;
|
||||
// height: calc(100% - 70px);
|
||||
// }
|
||||
|
||||
// .el-dropdown-menu__item {
|
||||
// font-size: 14px;
|
||||
// font-weight: 400;
|
||||
// line-height: 20px;
|
||||
// padding: 8px 20px 8px 32px;
|
||||
// }
|
||||
|
||||
// .el-checkbox {
|
||||
// margin: 4px 0;
|
||||
// }
|
||||
|
||||
// .el-dropdown {
|
||||
// display: -webkit-box;
|
||||
// display: -ms-flexbox;
|
||||
// display: flex;
|
||||
// padding: 0 8px;
|
||||
// font-size: 13px;
|
||||
// cursor: pointer;
|
||||
// }
|
||||
|
||||
// .el-dropdown-menu {
|
||||
// border: none;
|
||||
// -webkit-user-select: none;
|
||||
// -moz-user-select: none;
|
||||
// -ms-user-select: none;
|
||||
// user-select: none;
|
||||
// }
|
||||
|
||||
// .el-dropdown-link {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// .el-dropdown-link:focus {
|
||||
// outline: none;
|
||||
// }
|
||||
|
||||
// .el-dropdown-menu__item:hover {
|
||||
// background: rgba(242, 244, 247, 1) !important;
|
||||
// color: #212121 !important;
|
||||
// }
|
||||
|
||||
// .el-tabs__active-bar {
|
||||
// height: 4px!important;
|
||||
// width: 20px!important;
|
||||
// }
|
||||
|
||||
// .is-active {
|
||||
// color: #3E93E1!important;
|
||||
// font-weight: bold!important;
|
||||
// }
|
||||
|
||||
// .ql-container.ql-snow {
|
||||
// border-radius: 3px;
|
||||
// border: 1px solid rgba(171, 186, 203, 1);
|
||||
// }
|
||||
|
||||
// .ql-editor {
|
||||
// padding: 12px 8px!important;
|
||||
// background: white;
|
||||
// }
|
||||
|
||||
// .ql-editor.ql-blank::before {
|
||||
// left: 8px!important;
|
||||
// opacity: 0.5;
|
||||
// font-style: normal!important;
|
||||
// }
|
||||
|
||||
// .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
// color: #348de0;
|
||||
// }
|
||||
|
||||
// .el-tabs__item:focus.is-active.is-focus:not(:active) {
|
||||
// -webkit-box-shadow: none !important;
|
||||
// box-shadow: none !important;
|
||||
// }
|
||||
|
||||
// .el-dialog__header {
|
||||
// border-bottom: 1px solid #f0f1f2ff;
|
||||
// }
|
||||
|
||||
// .el-dialog__body {
|
||||
// padding: 24px 20px
|
||||
// }
|
||||
|
||||
// .el-input-number--mini {
|
||||
// width: 90px;
|
||||
// }
|
||||
|
||||
// .el-input--mini>input {
|
||||
// padding: 0 !important;
|
||||
// }
|
||||
// .el-dialog {
|
||||
// width: 60%;
|
||||
// }
|
||||
|
||||
// /*自定义popper-class*/
|
||||
// .tip_popper {
|
||||
// max-width: 232px;
|
||||
// font-size: 12px;
|
||||
// color: #212121;
|
||||
// line-height: 17px;
|
||||
// }
|
||||
// .tip_popper /deep/ .popper__arrow{
|
||||
// /* border-bottom-color: white !important;
|
||||
// border-top-color: white !important; */
|
||||
// }
|
||||
// /* 新版本UI checkBox相关 start */
|
||||
// /* el-radio相关写在这里 */
|
||||
// .el-radio__inner{
|
||||
// border-color: rgba(204, 204, 204, 1)!important;
|
||||
// background: rgba(255, 255, 255, 0);
|
||||
// }
|
||||
// .is-checked > .el-radio__inner{
|
||||
// border-color: rgba(76, 131, 253, 1)!important;
|
||||
// }
|
||||
// .el-radio__inner::after{
|
||||
// width:8px;
|
||||
// height: 8px;
|
||||
// background: rgba(76, 131, 253, 1);
|
||||
// border:1px solid #fff;
|
||||
// -webkit-box-sizing:content-box;
|
||||
// box-sizing:content-box;
|
||||
// }
|
||||
// /* 新版本UI checkBox相关 end */
|
||||
4817
vueTem/src/styles/css/toolbar.scss
Normal file
4817
vueTem/src/styles/css/toolbar.scss
Normal file
File diff suppressed because it is too large
Load Diff
2642
vueTem/src/styles/css/toolbarfont.css
Normal file
2642
vueTem/src/styles/css/toolbarfont.css
Normal file
File diff suppressed because it is too large
Load Diff
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.eot
Normal file
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.eot
Normal file
Binary file not shown.
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.ttf
Normal file
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.woff
Normal file
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.woff
Normal file
Binary file not shown.
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.woff2
Normal file
BIN
vueTem/src/styles/fonts/MaterialIcons-Regular.woff2
Normal file
Binary file not shown.
2337
vueTem/src/styles/fonts/css/font-awesome.css
vendored
Normal file
2337
vueTem/src/styles/fonts/css/font-awesome.css
vendored
Normal file
File diff suppressed because it is too large
Load Diff
4
vueTem/src/styles/fonts/css/font-awesome.min.css
vendored
Normal file
4
vueTem/src/styles/fonts/css/font-awesome.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
BIN
vueTem/src/styles/fonts/fonts/FontAwesome.otf
Normal file
BIN
vueTem/src/styles/fonts/fonts/FontAwesome.otf
Normal file
Binary file not shown.
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.eot
Normal file
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.eot
Normal file
Binary file not shown.
2671
vueTem/src/styles/fonts/fonts/fontawesome-webfont.svg
Normal file
2671
vueTem/src/styles/fonts/fonts/fontawesome-webfont.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 434 KiB |
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.ttf
Normal file
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.ttf
Normal file
Binary file not shown.
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.woff
Normal file
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.woff
Normal file
Binary file not shown.
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.woff2
Normal file
BIN
vueTem/src/styles/fonts/fonts/fontawesome-webfont.woff2
Normal file
Binary file not shown.
955
vueTem/src/views/editor/centerPanel.vue
Normal file
955
vueTem/src/views/editor/centerPanel.vue
Normal file
@@ -0,0 +1,955 @@
|
||||
<template>
|
||||
<div class="centerEditor">
|
||||
<div class="centerEditorContainer">
|
||||
<div class="loading" v-show="gameLoadingStatus">
|
||||
<svg
|
||||
width="45"
|
||||
height="45"
|
||||
viewBox="0 0 45 45"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
stroke="#fff"
|
||||
>
|
||||
<g
|
||||
fill="none"
|
||||
fill-rule="evenodd"
|
||||
transform="translate(1 1)"
|
||||
stroke-width="2"
|
||||
>
|
||||
<circle cx="22" cy="22" r="6" stroke-opacity="0">
|
||||
<animate
|
||||
attributeName="r"
|
||||
begin="1.5s"
|
||||
dur="3s"
|
||||
values="6;22"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-opacity"
|
||||
begin="1.5s"
|
||||
dur="3s"
|
||||
values="1;0"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-width"
|
||||
begin="1.5s"
|
||||
dur="3s"
|
||||
values="2;0"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle cx="22" cy="22" r="6" stroke-opacity="0">
|
||||
<animate
|
||||
attributeName="r"
|
||||
begin="3s"
|
||||
dur="3s"
|
||||
values="6;22"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-opacity"
|
||||
begin="3s"
|
||||
dur="3s"
|
||||
values="1;0"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-width"
|
||||
begin="3s"
|
||||
dur="3s"
|
||||
values="2;0"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
<circle cx="22" cy="22" r="8">
|
||||
<animate
|
||||
attributeName="r"
|
||||
begin="0s"
|
||||
dur="1.5s"
|
||||
values="6;1;2;3;4;5;6"
|
||||
calcMode="linear"
|
||||
repeatCount="indefinite"
|
||||
/>
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="base-filter-block">
|
||||
<ul class="group-list">
|
||||
<li class="group-item">
|
||||
<label class="group-label"
|
||||
><span class="label-name">游戏类型</span
|
||||
><span class="colon">：</span></label
|
||||
>
|
||||
<div class="group-options">
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': !GameSyncTypeEnumSelect }"
|
||||
@click="selectFilter('GameSyncTypeEnum', null)"
|
||||
>
|
||||
<span>全部</span>
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': GameSyncTypeEnumSelect == item }"
|
||||
v-for="(item, index) in GameSyncTypeEnum"
|
||||
:key="index"
|
||||
@click="selectFilter('GameSyncTypeEnum', item)"
|
||||
>
|
||||
<span> {{ item }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="group-item">
|
||||
<label class="group-label"
|
||||
><span class="label-name">年级</span
|
||||
><span class="colon">：</span></label
|
||||
>
|
||||
<div class="group-options">
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': !GradeEnumSelect }"
|
||||
@click="selectFilter('GradeEnum', null)"
|
||||
>
|
||||
<span>全部</span>
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': GradeEnumSelect == item }"
|
||||
v-for="(item, index) in GradeEnum"
|
||||
:key="index"
|
||||
@click="selectFilter('GradeEnum', item)"
|
||||
>
|
||||
<span> {{ item }}年级 </span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="group-item">
|
||||
<label class="group-label"
|
||||
><span class="label-name">所属环节</span
|
||||
><span class="colon">：</span></label
|
||||
>
|
||||
<div class="group-options">
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': !CourseStepEnumSelect }"
|
||||
@click="selectFilter('CourseStepEnum', null)"
|
||||
>
|
||||
<span>全部</span>
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': CourseStepEnumSelect == item }"
|
||||
v-for="(item, index) in CourseStepEnum"
|
||||
:key="index"
|
||||
@click="selectFilter('CourseStepEnum', item)"
|
||||
>
|
||||
<span> {{ item }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="group-item">
|
||||
<label class="group-label"
|
||||
><span class="label-name">研发者</span
|
||||
><span class="colon">：</span></label
|
||||
>
|
||||
<div class="group-options">
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': !AuthorEnumSelect }"
|
||||
@click="selectFilter('AuthorEnum', null)"
|
||||
>
|
||||
<span>全部</span>
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': AuthorEnumSelect == item }"
|
||||
v-for="(item, index) in AuthorEnum"
|
||||
:key="index"
|
||||
@click="selectFilter('AuthorEnum', item)"
|
||||
>
|
||||
<span> {{ item }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<li class="group-item">
|
||||
<label class="group-label"
|
||||
><span class="label-name">学科</span
|
||||
><span class="colon">：</span></label
|
||||
>
|
||||
<div class="group-options">
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': !SubjectEnumSelect }"
|
||||
@click="selectFilter('SubjectEnum', null)"
|
||||
>
|
||||
<span>全部</span>
|
||||
</div>
|
||||
<div
|
||||
class="option-item"
|
||||
:class="{ 'is-actived': SubjectEnumSelect == item }"
|
||||
v-for="(item, index) in SubjectEnum"
|
||||
:key="index"
|
||||
@click="selectFilter('SubjectEnum', item)"
|
||||
>
|
||||
<span> {{ item }} </span>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="result-num">
|
||||
共 <b>{{ sampleData.length }}</b> 个游戏
|
||||
</p>
|
||||
<div class="no-data" v-if="!sampleData.length">
|
||||
<img src="/static/img/nodata.png" class="no-data-bg" />
|
||||
<p class="no-data-text">未找到相应内容</p>
|
||||
</div>
|
||||
<div class="itemList">
|
||||
<div
|
||||
class="itemContainer"
|
||||
v-for="item in sampleData"
|
||||
:key="item.name"
|
||||
@click="showGameModel(item)"
|
||||
>
|
||||
<span><img :src="'/static/img/cover/' + item.name + '.jpg'" /></span>
|
||||
<div class="cover-info">
|
||||
<span>
|
||||
<h4>{{ item.title }}</h4>
|
||||
</span>
|
||||
<small>{{ item.description }}</small>
|
||||
</div>
|
||||
<div class="cover-fields">
|
||||
<i class="fa fa-list-ul"></i>
|
||||
{{ item.type }}
|
||||
</div>
|
||||
<div class="cover-stat">
|
||||
<i class="fa fa-eye"></i
|
||||
><span class="f10"> {{ item.tip }}</span>
|
||||
<i class="fa fa-heart"></i
|
||||
><span class="f10"> {{ item.grade.join(',') }}年级</span>
|
||||
<div class="cover-yh">
|
||||
{{ item.author }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modalMask" v-show="gameShowStatus">
|
||||
<div class="modalContainer">
|
||||
<map-editor ref="editor" @sceneLoaded="sceneLoaded"> </map-editor>
|
||||
<div class="game-details-block">
|
||||
<div class="block-top">
|
||||
<p class="game-name text-overflow">
|
||||
<span> {{ selectSample.title }} </span>
|
||||
</p>
|
||||
<div class="game-datas">
|
||||
<!-- <div class="game-use-count"><span class="use-num">使用 0</span><span class="answer-num">作答 0</span><span class="correct-rate">正确率 0%</span></div> -->
|
||||
</div>
|
||||
<div class="tool-btns">
|
||||
<div
|
||||
class="game-add-button iconfont icon-car larger"
|
||||
:class="{ disabled: disabledStartBtn }"
|
||||
@click="gameBegin"
|
||||
>
|
||||
开始游戏
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="block-main overflow">
|
||||
<li>
|
||||
<label class="label-name">游戏类型：</label>
|
||||
<div class="game-id">
|
||||
<em>{{ selectSample.type }}</em>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-name">年级：</label>
|
||||
<div class="game-url">
|
||||
<em>{{ selectSample.grade.join(',') }}年级</em>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-name">游戏简介：</label>
|
||||
<p class="game-desc">{{ selectSample.description }}</p>
|
||||
</li>
|
||||
<li>
|
||||
<label class="label-name">游戏标签：</label>
|
||||
<ul class="game-label-list">
|
||||
<li><span>思维逻辑</span></li>
|
||||
<li><span>逆向思维</span></li>
|
||||
<li><span>鸡蛋灌饼</span></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="game-label">
|
||||
<label class="label-name">程序id：</label>
|
||||
<ul class="knowledge-label-list">
|
||||
<li>{{ selectSample.name }}</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="upload-name">
|
||||
<label class="label-name">研发：</label
|
||||
><span>{{ selectSample.author }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="fa fa-close iconClose"
|
||||
aria-hidden="true"
|
||||
@click="closeGameModel"
|
||||
></div>
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div class="yyMask" v-show="yyLoadingStatus">
|
||||
<img src="/static/img/loading-yy.gif" />
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
import mapEditor from './mapEditor'
|
||||
import {
|
||||
sampleData,
|
||||
GameSyncTypeEnum,
|
||||
GradeEnum,
|
||||
CourseStepEnum,
|
||||
AuthorEnum,
|
||||
SubjectEnum,
|
||||
} from '@/config/configSample'
|
||||
import web2game from './web2game'
|
||||
|
||||
import { GAME2WEB_EVENTTYPE, E2G_EVENTTYPE } from '../../const/event'
|
||||
export default {
|
||||
created() {
|
||||
this.sampleData = sampleData
|
||||
this.oriSampleData = this.sampleData
|
||||
// eventBus.on(GAME2WEB_EVENTTYPE.ON_PAGE_CHANGE_SUCCESS, () => {
|
||||
// this.gameLoadingStatus = false
|
||||
// this.gameShowStatus = true
|
||||
// setTimeout(() => {
|
||||
// // 改变位置后
|
||||
// const myEvent = new Event('resize')
|
||||
// window.dispatchEvent(myEvent)
|
||||
// }, 200)
|
||||
// })
|
||||
|
||||
},
|
||||
components: {
|
||||
mapEditor,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
gameShowStatus: false,
|
||||
gameLoadingStatus: false,
|
||||
isFirstCreate: true,
|
||||
yyLoadingStatus: false,
|
||||
disabledStartBtn: false,
|
||||
GameSyncTypeEnum,
|
||||
GradeEnum,
|
||||
CourseStepEnum,
|
||||
AuthorEnum,
|
||||
SubjectEnum,
|
||||
GameSyncTypeEnumSelect: null,
|
||||
GradeEnumSelect: null,
|
||||
CourseStepEnumSelect: null,
|
||||
AuthorEnumSelect: null,
|
||||
SubjectEnumSelect: null,
|
||||
sampleData: [],
|
||||
oriSampleData: [],
|
||||
selectSample: {
|
||||
name: 'game_labyrinth',
|
||||
title: '迷宫',
|
||||
description: '使小球走道终点，可以用aswd或者上下左右的键盘进行控制',
|
||||
grade: [1, 2, 3],
|
||||
tip: '大游戏',
|
||||
author: '靳国强',
|
||||
type: '分发',
|
||||
},
|
||||
ratio: 2.5,
|
||||
STUDENT_SIZE: {
|
||||
width: 2048,
|
||||
height: 1152,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sceneLoaded() {
|
||||
// this.gameShowStatus = false
|
||||
this.yyLoadingStatus = false
|
||||
},
|
||||
showGameModel(selectSample) {
|
||||
this.gameLoadingStatus = true
|
||||
this.selectSample = selectSample
|
||||
this.disabledStartBtn = false
|
||||
web2game.loadScene(selectSample.name)
|
||||
// .then((sceneName) => {
|
||||
// cc.director.loadScene(selectSample.name)
|
||||
this.gameLoadingStatus = false
|
||||
this.gameShowStatus = true
|
||||
// // web2game.updateResolution(this.STUDENT_SIZE, this.ratio)
|
||||
|
||||
// // setTimeout(() => {
|
||||
// // // 改变位置后
|
||||
// // const myEvent = new Event('resize')
|
||||
// // window.dispatchEvent(myEvent)
|
||||
// // },400)
|
||||
// })
|
||||
},
|
||||
closeGameModel() {
|
||||
this.gameShowStatus = false
|
||||
// web2game.unloadGame()
|
||||
},
|
||||
gameBegin() {
|
||||
if (this.disabledStartBtn) return
|
||||
this.disabledStartBtn = true
|
||||
web2game.emit('nova.teacher.start')
|
||||
},
|
||||
selectFilter(key, value) {
|
||||
this[key + 'Select'] = value
|
||||
this.search()
|
||||
},
|
||||
search() {
|
||||
this.sampleData = this.oriSampleData.filter((el) => {
|
||||
return (
|
||||
(!this.GameSyncTypeEnumSelect ||
|
||||
el.type == this.GameSyncTypeEnumSelect) &&
|
||||
(!this.GradeEnumSelect || el.grade.includes(this.GradeEnumSelect)) &&
|
||||
(!this.CourseStepEnumSelect || el.tip == this.CourseStepEnumSelect) &&
|
||||
(!this.AuthorEnumSelect || el.author == this.AuthorEnumSelect) &&
|
||||
(!this.SubjectEnumSelect || el.subject == this.SubjectEnumSelect)
|
||||
)
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang = scss>
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-enter-active {
|
||||
transition: opacity 1s;
|
||||
}
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
.fade-leave-active {
|
||||
transition: opacity 1s;
|
||||
}
|
||||
|
||||
.centerEditor {
|
||||
position: relative;
|
||||
top: 75px;
|
||||
padding-bottom: 50px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.centerEditorContainer {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.loading {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
.no-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
img {
|
||||
height: 136px;
|
||||
}
|
||||
.no-data-text {
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.base-filter-block {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 13px 24px 13px 24px;
|
||||
background: #fff;
|
||||
flex-shrink: 0;
|
||||
margin-top: 24px;
|
||||
box-shadow: 0 1px 3px 0 rgba(85, 97, 107, 0.15);
|
||||
border-radius: 4px;
|
||||
.group-list {
|
||||
flex: 1;
|
||||
margin-right: 16px;
|
||||
.group-item {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.group-label {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
margin-top: 3px;
|
||||
width: 65px;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font-weight: 600;
|
||||
.red-icon {
|
||||
position: relative;
|
||||
padding-left: 14px;
|
||||
}
|
||||
.label-name {
|
||||
padding-left: 0px;
|
||||
flex: 1;
|
||||
text-align-last: justify;
|
||||
}
|
||||
.colon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
.group-options {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.option-item {
|
||||
padding: 3px 4px;
|
||||
height: 26px;
|
||||
cursor: pointer;
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
&.is-actived span,
|
||||
&:hover span {
|
||||
background-color: #e7f5ff;
|
||||
color: #3f92ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.itemList {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 23.7%);
|
||||
grid-row-gap: 20px;
|
||||
grid-column-gap: 20px;
|
||||
width: 100%;
|
||||
.itemContainer {
|
||||
background-color: #fff;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
|
||||
position: relative;
|
||||
transition: all 1s ease 0s;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
box-shadow: 7px 17px 12px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.cover-info {
|
||||
padding: 6px 15px 28px;
|
||||
height: 80px;
|
||||
overflow: hidden;
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: keep-all;
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
margin-top: 7px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
small {
|
||||
color: #838383;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.cover-fields {
|
||||
bottom: 34px;
|
||||
font-size: 12px;
|
||||
height: 35px;
|
||||
left: 10px;
|
||||
line-height: 35px;
|
||||
max-width: 210px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
}
|
||||
.cover-stat {
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 0 0 3px 3px;
|
||||
border-top: 1px solid #e7e7e7;
|
||||
box-shadow: 0 1px 0 0 #fff inset;
|
||||
padding: 7px 15px 7px 15px;
|
||||
color: #8b8b8c;
|
||||
position: relative;
|
||||
.cover-yh {
|
||||
position: absolute;
|
||||
right: 1px;
|
||||
top: 1px;
|
||||
border-left: 1px solid #ddd;
|
||||
color: #aaa;
|
||||
cursor: default;
|
||||
width: 40px;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
transition: color 0.15s linear;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
text-rendering: auto;
|
||||
font-size: 12px;
|
||||
font-family: 'Arial';
|
||||
}
|
||||
.f10 {
|
||||
font-size: 10px;
|
||||
font-family: 'Arial';
|
||||
padding-right: 12px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
border-top-left-radius: 5px;
|
||||
border-top-right-radius: 5px;
|
||||
transition: all 1s ease 0s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.yyMask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 4;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
img {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%) scale(-0.5, 0.5);
|
||||
}
|
||||
}
|
||||
.result-num {
|
||||
flex-shrink: 0;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: #666;
|
||||
}
|
||||
.modalMask {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(3, 3, 3, 0.5);
|
||||
.iconClose {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
right: 300px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
font-size: 40px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
.modalContainer {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
.game-details-block {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
margin-left: 16px;
|
||||
width: 370px;
|
||||
height: 460px;
|
||||
background: #fff;
|
||||
-webkit-box-shadow: 0 2px 10px 0 rgba(58, 66, 73, 0.21);
|
||||
box-shadow: 0 2px 10px 0 rgba(58, 66, 73, 0.21);
|
||||
border-radius: 4px;
|
||||
.block-main,
|
||||
.block-top {
|
||||
padding-left: 24px;
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
.block-top {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
padding-top: 24px;
|
||||
padding-bottom: 21px;
|
||||
border-bottom: 1px solid #f0f1f2;
|
||||
}
|
||||
|
||||
.block-main {
|
||||
-webkit-box-flex: 1;
|
||||
-ms-flex: 1;
|
||||
flex: 1;
|
||||
padding-bottom: 31px;
|
||||
}
|
||||
|
||||
.block-footer {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
border-top: 1px solid #f0f1f2;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-name {
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
}
|
||||
|
||||
.game-datas {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
margin-top: 14px;
|
||||
.game-use-count {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
font-size: 12px;
|
||||
line-height: 16px;
|
||||
color: #979ea6;
|
||||
}
|
||||
|
||||
.game-use-count > span + span {
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.tool-btns {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
margin-top: 22px;
|
||||
.larger {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.game-add-button {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
background: #3f92ff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
&:active {
|
||||
background: #66a8ff;
|
||||
}
|
||||
&:hover {
|
||||
background: #66a8ff;
|
||||
}
|
||||
&.disabled {
|
||||
cursor: not-allowed;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-btns .btn-edit,
|
||||
.tool-btns .game-add-button {
|
||||
margin-right: 14px;
|
||||
}
|
||||
|
||||
.tool-btns .btn-edit,
|
||||
.tool-btns .btn-modify {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
border-radius: 8px;
|
||||
color: #3f92ff;
|
||||
}
|
||||
|
||||
.tool-btns .btn-edit > .iconfont,
|
||||
.tool-btns .btn-modify > .iconfont {
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.block-main > li {
|
||||
margin-top: 19px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.block-main > li.game-label,
|
||||
.block-main > li.upload-name {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.label-name {
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
margin-right: 8px;
|
||||
width: 70px;
|
||||
-moz-text-align-last: justify;
|
||||
text-align-last: justify;
|
||||
}
|
||||
|
||||
.icon-copy {
|
||||
margin-left: 6px;
|
||||
padding: 0 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-copy:hover {
|
||||
color: #3f92ff;
|
||||
}
|
||||
|
||||
.game-desc {
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.game-desc .icon-arrow-bottom,
|
||||
.game-desc .icon-arrow-top {
|
||||
color: #3f92ff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.game-label-list,
|
||||
.knowledge-label-list {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.game-label-list li {
|
||||
margin-right: 12px;
|
||||
margin-bottom: 11px;
|
||||
padding: 1px 0;
|
||||
}
|
||||
|
||||
.game-label-list li > span {
|
||||
display: inline-block;
|
||||
padding: 1px 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
border-radius: 3px;
|
||||
color: #979ea6;
|
||||
background-color: #f0f4f6;
|
||||
}
|
||||
|
||||
.knowledge-label-list li {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 12px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.knowledge-label-list li .icon-label {
|
||||
margin-right: 6px;
|
||||
color: #979ea6;
|
||||
}
|
||||
|
||||
.knowledge-label-list li > span {
|
||||
color: #979ea6;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
margin-top: 18px;
|
||||
margin-bottom: 20px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #333;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-delete .icon-delete {
|
||||
margin-right: 10px;
|
||||
font-size: 14px;
|
||||
color: #979ea6;
|
||||
}
|
||||
|
||||
.btn-delete:hover .icon-delete {
|
||||
color: #ff4640;
|
||||
}
|
||||
}
|
||||
.gameDetailsBlock {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-left: 16px;
|
||||
width: 420px;
|
||||
background: #fff;
|
||||
box-shadow: 0 2px 10px 0 rgba(58, 66, 73, 0.21);
|
||||
border-radius: 4px;
|
||||
/* &.teacherSize {
|
||||
width: 3036px;
|
||||
height: 1366px;
|
||||
transform: matrix(0.33, 0, 0, 0.33, -1618, -768);
|
||||
}
|
||||
&.studentSize {
|
||||
width: 2048px;
|
||||
height: 1152px;
|
||||
transform: matrix(0.5, 0, 0, 0.5, -1124, -576);
|
||||
} */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
28
vueTem/src/views/editor/editor.vue
Normal file
28
vueTem/src/views/editor/editor.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div class="editor">
|
||||
<center-panel></center-panel>
|
||||
<right-panel></right-panel>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import centerPanel from './centerPanel'
|
||||
import rightPanel from './rightPanel'
|
||||
|
||||
export default {
|
||||
name: 'electron-cocos',
|
||||
components: {
|
||||
centerPanel,
|
||||
rightPanel,
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.editor {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
159
vueTem/src/views/editor/headEditor.vue
Normal file
159
vueTem/src/views/editor/headEditor.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="topbar topicfixed">
|
||||
<div class="toppic">
|
||||
<div class="topside">
|
||||
<a
|
||||
href="##"
|
||||
class="logoLink"
|
||||
>im.qq.com</a>
|
||||
<ul
|
||||
id="topNav"
|
||||
class="topNav"
|
||||
>
|
||||
<li
|
||||
v-for='item in routerData'
|
||||
:key='item.path'
|
||||
active-class='current'
|
||||
>
|
||||
<router-link :to="item.path">
|
||||
{{item.name}}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
routerData: [
|
||||
{
|
||||
name: '首页',
|
||||
path: '/index',
|
||||
},
|
||||
{
|
||||
name: '汉字笔顺生成器',
|
||||
path: '/hanzi',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang = scss>
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Helvetica, Tahoma, Arial, 'Hiragino Sans GB',
|
||||
'Hiragino Sans GB W3', 'Microsoft YaHei', STXihei, STHeiti, Heiti, SimSun,
|
||||
sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.toppic {
|
||||
max-width: 1170px;
|
||||
min-width: 980px;
|
||||
width: 80%;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
/*color: #fff;*/
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topicfixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.international .topicfixed .toppic a {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.topside {
|
||||
float: left;
|
||||
width: 59%;
|
||||
}
|
||||
|
||||
.logoLink {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 31px;
|
||||
height: 0px;
|
||||
overflow: hidden;
|
||||
padding-top: 76px;
|
||||
font-size: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/static/img/youyou.png');
|
||||
background-position: 0 50%;
|
||||
background-size: 31px 46px;
|
||||
}
|
||||
.topNav {
|
||||
float: left;
|
||||
width: 450px;
|
||||
li {
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
|
||||
a {
|
||||
float: left;
|
||||
padding: 0 20px;
|
||||
line-height: 75px;
|
||||
font-size: 1.125em;
|
||||
|
||||
&:hover {
|
||||
color: #3f92ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
color: #3f92ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topicfixed {
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
74
vueTem/src/views/editor/mapEditor.vue
Normal file
74
vueTem/src/views/editor/mapEditor.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div id="GameDiv" class="studentSize">
|
||||
<canvas id="GameCanvas"></canvas>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import GAME_INIT from '../../../static/cocos-loader/creator-load'
|
||||
import { GAME2WEB_EVENTTYPE, E2G_EVENTTYPE } from '../../const/event'
|
||||
import { mapState, mapMutations } from 'vuex'
|
||||
import web2game from './web2game'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ratio: 1.2,
|
||||
STUDENT_SIZE: {
|
||||
width: 960,
|
||||
height: 640,
|
||||
},
|
||||
TEACHER_SIZE: {
|
||||
width: 1012,
|
||||
height: 455,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
setTimeout(() => {
|
||||
this.init()
|
||||
}, 200)
|
||||
},
|
||||
computed: {
|
||||
...mapState('CCGameLoaded', ['isloaded']),
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
GAME_INIT(() => {
|
||||
web2game.loadScene('helloworld1').then((scenename) => {
|
||||
console.log(123)
|
||||
web2game.updateResolution(this.STUDENT_SIZE, this.ratio)
|
||||
this.$emit('sceneLoaded') // 发给父组件初始化完毕，这时去掉遮罩
|
||||
})
|
||||
})
|
||||
},
|
||||
...mapMutations('CCGameLoaded', ['SET_CCGAME_LOADED']),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang='scss'>
|
||||
#GameDiv {
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate(-50%, -50%);
|
||||
// &.teacherSize {
|
||||
// width: 1012px;
|
||||
// height: 455px;
|
||||
// }
|
||||
&.studentSize {
|
||||
width: 960;
|
||||
height: 640px;
|
||||
}
|
||||
}
|
||||
#GameCanvas {
|
||||
display: block;
|
||||
touch-action: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
border-radius: 5px;
|
||||
}
|
||||
canvas:focus {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
336
vueTem/src/views/editor/rightPanel.vue
Normal file
336
vueTem/src/views/editor/rightPanel.vue
Normal file
@@ -0,0 +1,336 @@
|
||||
<template>
|
||||
<div id="PropertyView" style="right: 0; top: 0">
|
||||
<h1 id="PropertyViewHeader" class="f--hlc" style="cursor: default">
|
||||
<div class="property-header f--hlc">
|
||||
<div>画布</div>
|
||||
</div>
|
||||
</h1>
|
||||
<div
|
||||
class=""
|
||||
id="PropertyViewBody"
|
||||
style="max-height: calc(100% - 30px); overflow-y: scroll"
|
||||
v-show="!foldMenuStatus"
|
||||
>
|
||||
<div class="property-fields">
|
||||
<form class="ant-form ant-form-horizontal form_display">
|
||||
<am-input
|
||||
@change="changeX4Game"
|
||||
v-model="x"
|
||||
label="X轴位移"
|
||||
icon="px"
|
||||
:full="false"
|
||||
min="-9999"
|
||||
/>
|
||||
<am-input
|
||||
@change="changeY4Game"
|
||||
v-model="y"
|
||||
label="Y轴位移"
|
||||
icon="px"
|
||||
:full="false"
|
||||
min="-9999"
|
||||
/>
|
||||
<am-input
|
||||
@change="changeAngle4Game"
|
||||
v-model="angle"
|
||||
icon="degree"
|
||||
:full="false"
|
||||
min="-360"
|
||||
>
|
||||
<template slot="label">
|
||||
<div class="rotation" title="旋转"></div>
|
||||
</template>
|
||||
</am-input>
|
||||
<am-input
|
||||
@change="changeScale4Game"
|
||||
v-model="scale"
|
||||
label="缩放"
|
||||
icon="rate"
|
||||
:full="false"
|
||||
:step="0.1"
|
||||
/>
|
||||
</form>
|
||||
<form class="ant-form ant-form-horizontal form_display2">
|
||||
<am-input
|
||||
@change="changeOpacity4Game"
|
||||
v-model="opacity"
|
||||
label="不透明度"
|
||||
showSlider
|
||||
min="0"
|
||||
max="100"
|
||||
icon="rate"
|
||||
/>
|
||||
</form>
|
||||
<form
|
||||
class="ant-form ant-form-horizontal form_display2"
|
||||
style="padding-bottom: 20px"
|
||||
>
|
||||
<el-upload
|
||||
action="https://jsonplaceholder.typicode.com/posts/"
|
||||
:limit="3"
|
||||
:file-list="fileList"
|
||||
:on-change="uploadChange"
|
||||
accept=".jpg,.jpeg,.png,.JPG,.JPEG"
|
||||
v-show="showImgUploadBtn"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
class="ant-btn ant-btn-primary"
|
||||
style="margin-bottom: 10px"
|
||||
>
|
||||
<span>上传图片</span>
|
||||
<span> </span>
|
||||
</button>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传jpg/png文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<am-alert :show.sync="showAlert" v-model="alertText" type="error" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import amInput from '../../components/BaseToolInput'
|
||||
import amColorPicker from '../../components/BaseColorPicker'
|
||||
import amSwitchInput from '../../components/BaseSwitchInput'
|
||||
import amToolTextarea from '../../components/BaseToolTextarea'
|
||||
import amAlert from '../../components/BaseAlert'
|
||||
import amConfirm from '../../components/BaseConfirm'
|
||||
import { GAME2WEB_EVENTTYPE, E2G_EVENTTYPE } from '../../const/event'
|
||||
// import { copyFile, saveConfig } from "../../utils/tools/node-utils";
|
||||
import web2game from './web2game'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
foldMenuStatus: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
angle: 0,
|
||||
scale: 1,
|
||||
opacity: 255,
|
||||
fileList: [],
|
||||
savePath: '',
|
||||
textCur: 'left',
|
||||
desCur: 'normal',
|
||||
styleCur: 'normal',
|
||||
weightCur: 'normal',
|
||||
colorSwitch: true,
|
||||
bgSwitch: true,
|
||||
showAlert: false,
|
||||
alertText: '',
|
||||
activeNode: null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.savePath = path.join(
|
||||
// path.resolve("."),
|
||||
// "cocos-build/web-mobile/custom"
|
||||
// );
|
||||
// eventBus.on('GAMENODE_MOVED', (target) => {
|
||||
// this.activeNode = target
|
||||
// this.changePosition4Editor()
|
||||
// })
|
||||
// eventBus.on('GAMENODE_MOVEEND', (target) => {
|
||||
// this.activeNode = target
|
||||
// this.changePosition4Editor()
|
||||
// this.changeNodeAttributeAndSave({
|
||||
// x: this.x,
|
||||
// y: this.y,
|
||||
// })
|
||||
// })
|
||||
|
||||
eventBus.on('WEB_MSG_TYPE.SELECT_NODE', (nodeInfo) => {
|
||||
this.activeNode = nodeInfo
|
||||
this.x = this.activeNode.x
|
||||
this.y = this.activeNode.y
|
||||
this.angle = this.activeNode.angle
|
||||
this.opacity = this.activeNode.opacity
|
||||
this.scale = this.activeNode.scale
|
||||
|
||||
console.log(nodeInfo)
|
||||
this.$notify({
|
||||
title: '打开控制台看console',
|
||||
position: 'top-left',
|
||||
message:
|
||||
'可以直接获取节点信息，并且可以直接在web内进行修改（可以直接在右边的属性栏内修改节点属性），如果还能实现保存，就能实现编辑了。',
|
||||
})
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
changePosition4Editor() {
|
||||
this.x = this.activeNode.x ? parseInt(this.activeNode.x) : 0
|
||||
this.y = this.activeNode.y ? parseInt(this.activeNode.y) : 0
|
||||
},
|
||||
changeColor(switchStatus, color) {
|
||||
console.log(switchStatus, color)
|
||||
},
|
||||
changeX4Game(newVal) {
|
||||
this.changeNodeAttribute4Game('x', this.x)
|
||||
},
|
||||
changeY4Game(newVal) {
|
||||
this.changeNodeAttribute4Game('y', this.y)
|
||||
},
|
||||
changeScale4Game(newVal) {
|
||||
this.changeNodeAttribute4Game('scale', this.scale)
|
||||
},
|
||||
changeAngle4Game(newVal) {
|
||||
console.log(this.angle)
|
||||
this.changeNodeAttribute4Game('angle', this.angle)
|
||||
},
|
||||
changeOpacity4Game(newVal) {
|
||||
this.changeNodeAttribute4Game('opacity', Math.ceil(this.opacity * 2.55))
|
||||
},
|
||||
changeNodeAttribute4Game(attribute, value) {
|
||||
if (typeof attribute == 'object') {
|
||||
for (let key in attribute) {
|
||||
web2game.setNodeAttribute({
|
||||
node: this.activeNode,
|
||||
key,
|
||||
value: attribute[key],
|
||||
})
|
||||
}
|
||||
} else {
|
||||
web2game.setNodeAttribute({
|
||||
node: this.activeNode,
|
||||
attribute,
|
||||
value,
|
||||
})
|
||||
}
|
||||
},
|
||||
changeNodeAttributeAndSave(attribute, value) {
|
||||
this.changeNodeAttribute4Game(attribute, value)
|
||||
// const gamesConfig = window.cocosGames;
|
||||
// const gameData = gamesConfig[1];
|
||||
// console.log(gamesConfig);
|
||||
// if (!gamesConfig[1].editorConfig) {
|
||||
// gamesConfig[1].editorConfig = {};
|
||||
// }
|
||||
// if (gamesConfig[1].editorConfig[this.activeNode.increaseId]) {
|
||||
// if (typeof attribute == "object") {
|
||||
// for (let key in attribute) {
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId][key] =
|
||||
// attribute[key];
|
||||
// }
|
||||
// } else {
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId][
|
||||
// attribute
|
||||
// ] = value;
|
||||
// }
|
||||
// } else {
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId] = {};
|
||||
// for (let key in attribute) {
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId][key] =
|
||||
// attribute[key];
|
||||
// }
|
||||
// }
|
||||
// console.log(4444);
|
||||
// saveConfig("window.cocosGames = " + JSON.stringify(gamesConfig));
|
||||
},
|
||||
|
||||
isImage(fileName) {
|
||||
if (typeof fileName !== 'string') return
|
||||
let name = fileName.toLowerCase()
|
||||
return (
|
||||
name.endsWith('.png') ||
|
||||
name.endsWith('.jpeg') ||
|
||||
name.endsWith('.jpg') ||
|
||||
name.endsWith('.png') ||
|
||||
name.endsWith('.bmp')
|
||||
)
|
||||
},
|
||||
// 方法判断
|
||||
uploadChange(file, fileList) {
|
||||
if (!this.activeNode) return
|
||||
// 拿到当前上传图片的name，判断其后缀名是否符合
|
||||
let type = this.isImage(file.name)
|
||||
console.log(type)
|
||||
this.fileList = fileList
|
||||
let fileLength = this.fileList.length
|
||||
if (!type) {
|
||||
// 若不符合图片类型，则让当前上传的文件去除掉即可，即从上传对列删除本次上传
|
||||
this.fileList.splice(fileLength - 1, 1)
|
||||
this.$message.error('只允许上传图片')
|
||||
return
|
||||
}
|
||||
this.onUploadSuccess(file, fileList)
|
||||
},
|
||||
onUploadSuccess(file, fileList) {
|
||||
console.log(file, fileList)
|
||||
var reader = new FileReader()
|
||||
reader.readAsDataURL(file.raw)
|
||||
reader.onload = () => {
|
||||
console.log(reader.result) //获取到base64格式图片
|
||||
const img = new Image()
|
||||
img.src = reader.result
|
||||
let tex = new cc.Texture2D()
|
||||
tex.initWithElement(img)
|
||||
tex.handleLoadedTexture()
|
||||
this.activeNode.getComponent(
|
||||
cc.Sprite
|
||||
).spriteFrame = new cc.SpriteFrame(tex)
|
||||
// const sp = new SpriteFrame()
|
||||
// sp.texture = tex
|
||||
// self.sp.spriteFrame = sp
|
||||
}
|
||||
// cc.loader.load(img, (err, texture) => {
|
||||
// if (err) return
|
||||
// this.activeNode.getComponent(
|
||||
// cc.Sprite
|
||||
// ).spriteFrame = new cc.SpriteFrame(texture)
|
||||
// })
|
||||
// const filePath = file.raw.path;
|
||||
// const imageType = file.raw.type;
|
||||
// const name = Date.now();
|
||||
// const type = imageType.split("/")[1];
|
||||
// copyFile(filePath, this.savePath, name + "." + type, () => {
|
||||
// cc.log("进入回调");
|
||||
// cc.log(this.savePath + "/" + name + "." + type);
|
||||
// if (this.activeNode) {
|
||||
// web2game.LOAD_CUSTOMIMG(name + "." + type, (err, texture) => {
|
||||
// cc.log("加载成功");
|
||||
// var spriteFrame = new cc.SpriteFrame(texture);
|
||||
// this.activeNode.getComponent(cc.Sprite).spriteFrame = spriteFrame;
|
||||
// const gamesConfig = window.cocosGames;
|
||||
// const gameData = gamesConfig[1];
|
||||
// console.log(name + "." + type);
|
||||
// if (!gamesConfig[1].editorConfig) {
|
||||
// gamesConfig[1].editorConfig = {};
|
||||
// }
|
||||
// if (gamesConfig[1].editorConfig[this.activeNode.increaseId]) {
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId].sprite =
|
||||
// name + "." + type;
|
||||
// } else {
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId] = {};
|
||||
// gamesConfig[1].editorConfig[this.activeNode.increaseId].sprite =
|
||||
// name + "." + type;
|
||||
// }
|
||||
// saveConfig("window.cocosGames = " + JSON.stringify(gamesConfig));
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// fs.copyFile(filePath, this.savePath, (err)=>{
|
||||
// console.log(123)
|
||||
// });
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
showImgUploadBtn() {
|
||||
return this.activeNode && this.activeNode.getComponent(cc.Sprite)
|
||||
},
|
||||
},
|
||||
components: {
|
||||
amInput,
|
||||
amColorPicker,
|
||||
amSwitchInput,
|
||||
amToolTextarea,
|
||||
amAlert,
|
||||
amConfirm,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
96
vueTem/src/views/editor/web2game.js
Normal file
96
vueTem/src/views/editor/web2game.js
Normal file
@@ -0,0 +1,96 @@
|
||||
/* eslint-disable no-undef */
|
||||
/* eslint-disable space-before-function-paren */
|
||||
class Web2Game {
|
||||
/**
|
||||
* 根据页码切换课件
|
||||
*
|
||||
* @param {string} sceneName
|
||||
* @param {Function} callback
|
||||
* @memberof Web2Game
|
||||
*/
|
||||
changeGameByPageIndex(pageIndex, callback) {
|
||||
cc.web2cocosSDK.changeGameByPageIndex(pageIndex, callback)
|
||||
}
|
||||
/**
|
||||
* 加载场景
|
||||
*
|
||||
* @param {string} sceneName
|
||||
* @param {Function} callback
|
||||
* @memberof Web2Game
|
||||
*/
|
||||
loadScene(sceneName, callback) {
|
||||
return cc.web2cocosSDK.loadScene(sceneName, callback)
|
||||
}
|
||||
/**
|
||||
* 加载游戏的预制体
|
||||
*
|
||||
* @param {string} sceneName
|
||||
* @param {Function} callback
|
||||
* @memberof Web2Game
|
||||
*/
|
||||
loadGame(gameName, callback) {
|
||||
cc.web2cocosSDK.loadGame(gameName, callback)
|
||||
}
|
||||
/**
|
||||
* 卸载游戏
|
||||
*
|
||||
* @param {string} sceneName
|
||||
* @param {Function} callback
|
||||
* @memberof Web2Game
|
||||
*/
|
||||
unloadGame() {
|
||||
cc.web2cocosSDK.unloadGame()
|
||||
}
|
||||
/**
|
||||
* 加载图片 --electron内使用
|
||||
*
|
||||
* @param {string} sceneName
|
||||
* @param {Function} callback
|
||||
* @memberof Web2Game
|
||||
*/
|
||||
|
||||
loadCustomImage(imageName, callback) {
|
||||
cc.web2cocosSDK.loadCustomImage(imageName, callback)
|
||||
}
|
||||
/**
|
||||
* 重置game分辨率
|
||||
*
|
||||
* @param {cc.Vec2} editorSize {width:2048,height:1152}
|
||||
* @param {number} ratio 缩放的倍率
|
||||
* @param {Function} callFunc
|
||||
*/
|
||||
updateResolution(editorSize, ratio, callback) {
|
||||
cc.web2cocosSDK.updateResolution(editorSize, ratio, callback)
|
||||
}
|
||||
/**
|
||||
* 设置节点属性
|
||||
*
|
||||
* @param {string} sceneName
|
||||
* @param {Function} callback
|
||||
* @memberof Web2Game
|
||||
*/
|
||||
setNodeAttribute({ node, attribute, value }) {
|
||||
cc.web2cocosSDK.setNodeAttribute({ node, attribute, value })
|
||||
}
|
||||
/**
|
||||
* 触发cocos内的事件系统
|
||||
*
|
||||
* @param {*} eventName
|
||||
* @param {*} params
|
||||
*/
|
||||
emit(eventName, params) {
|
||||
cc.web2cocosSDK.emitGameEvt(eventName, params)
|
||||
}
|
||||
static getInstance() {
|
||||
let instance
|
||||
return function() {
|
||||
if (!instance) {
|
||||
instance = new Web2Game()
|
||||
}
|
||||
return instance
|
||||
}
|
||||
}
|
||||
}
|
||||
const web2game = new Web2Game()
|
||||
|
||||
export default web2game
|
||||
150
vueTem/src/views/header/TheHeader.vue
Normal file
150
vueTem/src/views/header/TheHeader.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="topbar topicfixed">
|
||||
<div class="toppic">
|
||||
<div class="topside">
|
||||
<a href="##" class="logoLink">im.qq.com</a>
|
||||
<ul id="topNav" class="topNav">
|
||||
<li>
|
||||
<a href="/">首页</a>
|
||||
</li>
|
||||
|
||||
<li v-for='item in routerData' :key='item.path' active-class='current'>
|
||||
<router-link :to="item.path">
|
||||
{{item.name}}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
routerData: [
|
||||
// {
|
||||
// name: '首页',
|
||||
// path: '/index'
|
||||
// },
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang = scss>
|
||||
div {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: Helvetica, Tahoma, Arial, 'Hiragino Sans GB',
|
||||
'Hiragino Sans GB W3', 'Microsoft YaHei', STXihei, STHeiti, Heiti, SimSun,
|
||||
sans-serif;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
a:link,
|
||||
a:visited {
|
||||
color: #333;
|
||||
text-decoration: none;
|
||||
}
|
||||
.topbar {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.toppic {
|
||||
max-width: 1170px;
|
||||
min-width: 980px;
|
||||
width: 80%;
|
||||
height: 75px;
|
||||
margin: 0 auto;
|
||||
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
/*color: #fff;*/
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topicfixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #dcdcdc;
|
||||
|
||||
a {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.international .topicfixed .toppic a {
|
||||
&:link,
|
||||
&:visited {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.topside {
|
||||
float: left;
|
||||
width: 59%;
|
||||
}
|
||||
|
||||
.logoLink {
|
||||
float: left;
|
||||
display: block;
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
overflow: hidden;
|
||||
margin-top: 13px;
|
||||
font-size: 0;
|
||||
background-color: transparent;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url('/static/img/head.jpg');
|
||||
background-position: 0 50%;
|
||||
background-size: 46px 46px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.topNav {
|
||||
float: left;
|
||||
width: 450px;
|
||||
li {
|
||||
float: left;
|
||||
margin-left: 20px;
|
||||
|
||||
a {
|
||||
float: left;
|
||||
padding: 0 20px;
|
||||
line-height: 75px;
|
||||
font-size: 1.125em;
|
||||
|
||||
&:hover {
|
||||
color: #3f92ff;
|
||||
}
|
||||
}
|
||||
|
||||
&.current a {
|
||||
color: #3f92ff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topicfixed {
|
||||
height: 75px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user