Skip to content

B
beyond-clouds-frontM
Commit 566428e3 by yanju
Options

路由配置

parent c729c7cc
Showing with 188 additions and 78 deletions
action/page-config.js
...@@ -8,6 +8,7 @@ export default { ...@@ -8,6 +8,7 @@ export default {
return `rgba(0,170,230,${opacity})` return `rgba(0,170,230,${opacity})`
}, },
routes:{ routes:{
downLoad:'',
login:'/users/login', login:'/users/login',
register:'users/register', register:'users/register',
reset:'users/reset', reset:'users/reset',
......
action/utils/dom.js
export function getOffset (el) { function getOffset (el) {
const box = el.getBoundingClientRect(); const box = el.getBoundingClientRect();
const body = document.body; const body = document.body;
const clientTop = el.clientTop || body.clientTop || 0; const clientTop = el.clientTop || body.clientTop || 0;
...@@ -10,3 +10,49 @@ export function getOffset (el) { ...@@ -10,3 +10,49 @@ export function getOffset (el) {
left: box.left + scrollLeft - clientLeft left: box.left + scrollLeft - clientLeft
}; };
} }
let fontSelfAdaption=()=>{
let e = document,
that = this,
t = e.documentElement,
defaultWidth = 750;
let eventName = "orientationchange" in window ? "orientationchange" : "resize",
functionName = function () {
let n = t.clientWidth;
n < 320 && (n = 320);
n > 750 && (n = 750);
t.style.fontSize = n / defaultWidth + "px";
window.$nuxt.$store.commit('page/changeRemRate',n/defaultWidth);
};
functionName();
window.addEventListener(eventName, functionName, !1);
}
let preventTouchDefault=()=>{
//取得当前滑动开始值
var startX,startY;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});
document.addEventListener("touchmove",function(e){
var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;
if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
e.preventDefault();
}
},{passive:false});
}
export {
getOffset,fontSelfAdaption,preventTouchDefault
}
components/common/dialog/src/main.vue
<template> <template>
<yun-popup <yun-popup
:value="value" :value="popupValue"
:hasMask="hasMask" :hasMask="hasMask"
position="center" position="center"
class="dialog-content" class="dialog-content"
...@@ -12,7 +12,6 @@ ...@@ -12,7 +12,6 @@
:border-r="[12]" :border-r="[12]"
bg-color-v="#fff" bg-color-v="#fff"
> >
<slot name="header"></slot>
<yun-div <yun-div
:font-style="[undefined,undefined,undefined,'#666f83','left']" :font-style="[undefined,undefined,undefined,'#666f83','left']"
:show-ske="false" :show-ske="false"
...@@ -29,14 +28,17 @@ ...@@ -29,14 +28,17 @@
}" }"
v-tap="close" v-tap="close"
> >
<yun-icon name="close1" size="32" /> <yun-icon name="close1" :size="32" />
</yun-div> </yun-div>
<yun-div <yun-div
v-if="title" v-if="title"
:font-style="[40,48,400,'#111a34','center']" :font-style="[40,48,400,'#111a34','center']"
:margin-v="[0,0,28]" :margin-v="[0,0,28]"
:show-ske="false" :show-ske="false"
>{{title}}</yun-div> >{{title}}</yun-div>
<slot name="header"></slot>
<yun-div <yun-div
:flex-v="['row','center','center']" :flex-v="['row','center','center']"
v-html="content" v-html="content"
...@@ -79,6 +81,12 @@ ...@@ -79,6 +81,12 @@
export default { export default {
name: 'yun-dialog', name: 'yun-dialog',
data(){
return{
popupValue:false
}
},
props: { props: {
value: { value: {
...@@ -99,7 +107,7 @@ ...@@ -99,7 +107,7 @@
}, },
closable: { closable: {
type: Boolean, type: Boolean,
default: true, default: false,
}, },
content: { content: {
type: String, type: String,
...@@ -141,6 +149,16 @@ ...@@ -141,6 +149,16 @@
}, },
}, },
created() {
this.popupValue = this.value;
},
watch:{
value(val){
this.popupValue = val
}
},
mounted() { mounted() {
if (this.appendTo) { if (this.appendTo) {
this.appendTo.appendChild(this.$el) this.appendTo.appendChild(this.$el)
...@@ -172,6 +190,7 @@ ...@@ -172,6 +190,7 @@
} }
if (typeof btn.handler === 'function') { if (typeof btn.handler === 'function') {
btn.handler.call(null, btn) btn.handler.call(null, btn)
this.close()
} else { } else {
this.close() this.close()
} }
...@@ -179,6 +198,7 @@ ...@@ -179,6 +198,7 @@
// MARK: public methods // MARK: public methods
close() { close() {
this.$emit('input', false) this.$emit('input', false)
this.popupValue =false;
}, },
}, },
} }
......
components/common/input/src/main.vue
...@@ -44,8 +44,10 @@ ...@@ -44,8 +44,10 @@
<yun-div <yun-div
:extend-style="{ :extend-style="{
flex:'1 1 0%' flex:'1 1 0%',
boxSizing: 'border-box',
}" }"
:padding-v="[0,20]"
> >
<input <input
:style="{width:'100%',height:'100%',backgroundColor:bgColorV }" :style="{width:'100%',height:'100%',backgroundColor:bgColorV }"
......
components/common/popup/src/main.vue
...@@ -92,6 +92,11 @@ export default { ...@@ -92,6 +92,11 @@ export default {
} }
}, },
}, },
created() {
if(this.value){
this.$_showPopupBox()
}
},
computed:{ computed:{
slotStyle(){ slotStyle(){
......
components/common/touch/index.js
...@@ -29,6 +29,14 @@ function TouchEvent(el,binding,type) { ...@@ -29,6 +29,14 @@ function TouchEvent(el,binding,type) {
_this.move,{passive:false}); _this.move,{passive:false});
}; };
_this.end =function (e) { _this.end =function (e) {
let appendDiv = document.createElement('div');
let appendDivTimer = null;
appendDiv.style.cssText='position:fixed;top:0;left:0;z-index:10000;height:100%;width:100%;background:transparent';
document.body.appendChild(appendDiv);
appendDivTimer = setTimeout(()=>{
document.body.removeChild(appendDiv);
clearTimeout(appendDivTimer)
},350)
var disX=e.changedTouches[0]?e.changedTouches[0].pageX-_this.vueTouches.x:0; var disX=e.changedTouches[0]?e.changedTouches[0].pageX-_this.vueTouches.x:0;
var disY=e.changedTouches[0]?e.changedTouches[0].pageY-_this.vueTouches.y:0; var disY=e.changedTouches[0]?e.changedTouches[0].pageY-_this.vueTouches.y:0;
clearTimeout(_this.time); clearTimeout(_this.time);
......
components/moblie/commonMixin.js
...@@ -7,7 +7,8 @@ export default { ...@@ -7,7 +7,8 @@ export default {
headerZIndex:pageConfig.headerZIndex, headerZIndex:pageConfig.headerZIndex,
messageZIndex:pageConfig.messageZIndex, messageZIndex:pageConfig.messageZIndex,
fullScreenZIndex:pageConfig.fullScreenZIndex, fullScreenZIndex:pageConfig.fullScreenZIndex,
normalZIndex:pageConfig.normalZIndex normalZIndex:pageConfig.normalZIndex,
routesObject:pageConfig.routes
} }
}, },
......
components/moblie/pageHeader.vue
...@@ -91,6 +91,7 @@ ...@@ -91,6 +91,7 @@
:margin-v="[0,(index+1)%5===0?0:64,44,0]" :margin-v="[0,(index+1)%5===0?0:64,44,0]"
v-for="(val,index) in menuArr" v-for="(val,index) in menuArr"
:key="val.name" :key="val.name"
v-tap="()=>navTapToChangeRoute1(val.route)"
> >
<yun-div <yun-div
:width-v="72" :width-v="72"
...@@ -211,6 +212,7 @@ ...@@ -211,6 +212,7 @@
<script> <script>
import Logo from '../../assets/svg/logo.svg' import Logo from '../../assets/svg/logo.svg'
import commonMixin from "./commonMixin"; import commonMixin from "./commonMixin";
import pageConfig from '../../action/page-config'
import pageFooter from "./pageFooter"; import pageFooter from "./pageFooter";
export default { export default {
mixins:[commonMixin], mixins:[commonMixin],
...@@ -221,14 +223,14 @@ ...@@ -221,14 +223,14 @@
return{ return{
showMenu:false, showMenu:false,
menuArr:[ menuArr:[
{name:'首页',icon:'logo_home',route:''}, {name:'首页',icon:'logo_home',route:pageConfig.routes.home},
{name:'项目',icon:'logo_project',route:''}, {name:'项目',icon:'logo_project',route:pageConfig.routes.project.index},
{name:'博客',icon:'logo_blog',route:''}, {name:'博客',icon:'logo_blog',route:pageConfig.routes.blog.index},
{name:'动态',icon:'logo_dynamic',route:''}, {name:'动态',icon:'logo_dynamic',route:pageConfig.routes.dynamic.index},
{name:'话题',icon:'logo_topic',route:''}, {name:'话题',icon:'logo_topic',route:pageConfig.routes.topic.index},
{name:'问答',icon:'logo_answer',route:''}, {name:'问答',icon:'logo_answer',route:pageConfig.routes.answer.index},
{name:'资讯',icon:'logo_news',route:''}, {name:'资讯',icon:'logo_news',route:pageConfig.routes.news.index},
{name:'下载',icon:'logo_download',route:''}, {name:'下载',icon:'logo_download',route:pageConfig.routes.downLoad},
], ],
searchValue:'', searchValue:'',
route:'home', route:'home',
...@@ -247,6 +249,13 @@ ...@@ -247,6 +249,13 @@
} }
}, },
methods:{
navTapToChangeRoute1(r){
this.showMenu = false;
this.changeRoute1(r)
}
},
created(){ created(){
this.route = this.$route.name; this.route = this.$route.name;
this.BCLogo = Logo; this.BCLogo = Logo;
......
layouts/blank.vue
...@@ -5,32 +5,18 @@ ...@@ -5,32 +5,18 @@
</template> </template>
<script> <script>
import {fontSelfAdaption,preventTouchDefault} from '../action/utils/dom';
export default { export default {
name: "blank", name: "blank",
mounted() { mounted() {
if(process.browser){ if(process.browser){
this.fontSelfAdaption() fontSelfAdaption();
preventTouchDefault();
} }
}, },
methods:{ methods:{
fontSelfAdaption(){
let e = document,
that = this,
t = e.documentElement,
defaultWidth = 750;
let eventName = "orientationchange" in window ? "orientationchange" : "resize",
functionName = function () {
let n = t.clientWidth;
n < 320 && (n = 320);
n > 750 && (n = 750);
t.style.fontSize = n / defaultWidth + "px";
that.$store.commit('page/changeRemRate',n/defaultWidth);
};
functionName();
window.addEventListener(eventName, functionName, !1);
}
}, },
} }
</script> </script>
......
layouts/default.vue
...@@ -11,7 +11,8 @@ ...@@ -11,7 +11,8 @@
<script> <script>
import PageHeader from '../components/moblie/pageHeader'; import PageHeader from '../components/moblie/pageHeader';
import PageFooter from '../components/moblie/pageFooter' import PageFooter from '../components/moblie/pageFooter';
import {fontSelfAdaption,preventTouchDefault} from '../action/utils/dom';
export default { export default {
components:{ components:{
PageHeader,PageFooter PageHeader,PageFooter
...@@ -20,50 +21,9 @@ ...@@ -20,50 +21,9 @@
mounted() { mounted() {
if(process.browser){ if(process.browser){
this.fontSelfAdaption(); fontSelfAdaption();
this.preventTouchDefault(); preventTouchDefault();
}
},
methods:{
fontSelfAdaption(){
let e = document,
that = this,
t = e.documentElement,
defaultWidth = 750;
let eventName = "orientationchange" in window ? "orientationchange" : "resize",
functionName = function () {
let n = t.clientWidth;
n < 320 && (n = 320);
n > 750 && (n = 750);
t.style.fontSize = n / defaultWidth + "px";
that.$store.commit('page/changeRemRate',n/defaultWidth);
};
functionName();
window.addEventListener(eventName, functionName, !1);
},
preventTouchDefault(){
//取得当前滑动开始值
var startX,startY;
document.addEventListener("touchstart",function(e){
startX = e.targetTouches[0].pageX;
startY = e.targetTouches[0].pageY;
});
document.addEventListener("touchmove",function(e){
var moveX = e.targetTouches[0].pageX;
var moveY = e.targetTouches[0].pageY;
if(Math.abs(moveX-startX)>Math.abs(moveY-startY)){
e.preventDefault();
}
},{passive:false});
} }
}, },
} }
......
pages/dynamic/release/index.vue
...@@ -280,7 +280,7 @@ ...@@ -280,7 +280,7 @@
:extend-style="{ :extend-style="{
display:'grid', display:'grid',
position:'absolute', position:'absolute',
gridTemplateRows:`${100*heightRate}px`, gridTemplateRows:`${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px`,
gridTemplateColumns:`${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px`, gridTemplateColumns:`${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px ${100*heightRate}px`,
}" }"
> >
......
pages/personal-center/person.vue 0 → 100644
<template>
<yun-div
slot="card"
>
<nav-bar :path="path" :nav-list="navList"></nav-bar>
<nuxt-child></nuxt-child>
<yun-dialog
title="添加备注"
:value="true"
:btns="slotDialog.btns"
>
<yun-div
:width-v="464"
:margin-v="[0,'auto']"
slot="header">
<yun-input
:width-v="464"
:height-v="72"
:border-v="[6]"
placeholder="请输入备注的内容"
:show-icon="false"
>
</yun-input>
</yun-div>
</yun-dialog>
</yun-div>
</template>
<script>
import NavBar from "../../components/moblie/nav";
import pageConfig from '../../action/page-config'
import FansCard from "../../components/moblie/fansCard";
export default {
components: {FansCard, NavBar},
data(){
return{
path: pageConfig.routes.personalCenter.person.fans,
navList: [
{
label: '粉丝',
id: '/fans'
},
{
label: '关注',
id: '/following'
}
],
slotDialog: {
open: true,
btns: [
{
text: '取消',
},
{
text: '确认',
handler: this.dataPostRemarks,
},
],
},
}
},
methods:{
dataPostRemarks(){
}
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment