Skip to content

html / poolin_app

Go to a project
Commit 91ddd4e4 by zhanghui1
Options

0111

parent 8fae1780
Showing with 162 additions and 55 deletions
config/index.js
...@@ -13,7 +13,7 @@ module.exports = { ...@@ -13,7 +13,7 @@ module.exports = {
proxyTable: {}, proxyTable: {},
// Various Dev Server settings // Various Dev Server settings
host: '172.16.4.38', // can be overwritten by process.env.HOST host: 'localhost', // can be overwritten by process.env.HOST
port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false, autoOpenBrowser: false,
errorOverlay: true, errorOverlay: true,
......
index.html
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<meta content="telephone=no" name="format-detection" /> <meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> <meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_538501_3ahpprkf1ug14i.css" />
<script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script> <script src="https://cdn.bootcss.com/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script> <script src="https://cdn.jsdelivr.net/npm/tween.js@16.3.4"></script>
<title>poolin_app</title> <title>poolin_app</title>
......
package.json
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
"author": "xin3w <xin3w@126.com>", "author": "xin3w <xin3w@126.com>",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js --host 172.16.4.38",
"start": "npm run dev", "start": "npm run dev",
"build": "node build/build.js" "build": "node build/build.js"
}, },
......
src/App.vue
<template> <template>
<div id="app"> <div id="app" :class="gradeClass">
<transition name="fade" mode="out-in"> <!-- <transition name="fade" mode="out-in">
<router-view/> <router-view/>
</transition> </transition> -->
<router-view/>
</div> </div>
</template> </template>
<script> <script>
...@@ -12,7 +13,22 @@ export default { ...@@ -12,7 +13,22 @@ export default {
return { return {
} }
},
created() {
if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
this.gradeClass = 'mobile-ios'
} else {
this.gradeClass = 'mobile-android'
}
} }
} }
</script> </script>
<style scoped lang='less'>
#app {
width: 100%;
height: 100%;
position: relative;
}
</style>
src/assets/img/logo.png
src/assets/img/logo.png

4.66 KB | W: | H:

src/assets/img/logo.png

4.83 KB | W: | H:

src/assets/img/logo.png
src/assets/img/logo.png
src/assets/img/logo.png
src/assets/img/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/less/style.less
...@@ -68,46 +68,72 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac ...@@ -68,46 +68,72 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac
/*样式修正*/ /*样式修正*/
.mint-header {background:@blue;}
.button-primary {background:@blue;border-color:@blue; box-shadow: 0 0.2rem 0.3rem rgba(16,63,115,0.2);} .button-primary {background:@blue;border-color:@blue; box-shadow: 0 0.2rem 0.3rem rgba(16,63,115,0.2);}
.swiper-home {.pos(r);
&:after {.line.xb;}
.swiper-button-next, .swiper-button-prev {width:0.18rem; height:0.32rem;background-size:0.18rem 0.32rem; margin-top: -0.16rem;} .page {width:100%;height:100%; overflow: hidden;.pos(a);
/* .page-header {background:@blue;color:#fff;.pos(f); left:0; top:0; right:0; height:44px;
.swiper-button-prev {left: 0;} .back {width:44px;height:44px; vertical-align: middle;.tc;
.swiper-button-next {right: 0;} i {font-size:30px;.txt-ver(44px);}
*/ }
.swiper-slide {.tc;} .title {font-size:0.36rem;.pos(a); left:44px; right:44px; .tc;}
span {color:#999;.d-ib;font-size:0.28rem;.txt-ver(0.9rem); background-size:0.5rem 0.5rem; background-repeat: no-repeat; background-position: left center; padding-left: 0.6rem; .btns {font-size:0.36rem; padding:0 15px;}
&.ltc {background-image:url(../img/index-tab1.png);} }
&.eth {background-image:url(../img/index-tab2.png);} .page-content {position:absolute;top:44px;width:100%;height:auto;left:0;right:0;bottom:0;overflow-x:hidden;overflow-y:auto;}
&.dash {background-image:url(../img/index-tab3.png);} }
&.xmr {background-image:url(../img/index-tab4.png);} .home{
&.btc {background-image:url(../img/index-tab5.png);} .header {height:2.9rem; background:@blue;
&.sc {background-image:url(../img/index-tab6.png);} .logo {width:2.8rem; height:auto;.d-b;}
&.zcash {background-image:url(../img/index-tab7.png);} &.ios { height:2.7rem; padding-top: 0.2rem;}
&.doge {background-image:url(../img/index-tab8.png);}
} }
span.active {color:#333;.d-ib;font-size:0.28rem;.txt-ver(0.9rem); background-size:0.5rem 0.5rem; background-repeat: no-repeat; background-position: left center; padding-left: 0.6rem; .swiper {.pos(r);
&.ltc {background-image:url(../img/index-tab1-active.png);} &:after {.line.xb;}
&.eth {background-image:url(../img/index-tab2-active.png);} .swiper-button-next, .swiper-button-prev {width:0.18rem; height:0.32rem;background-size:0.18rem 0.32rem; margin-top: -0.16rem;}
&.dash {background-image:url(../img/index-tab3-active.png);} .swiper-slide {.tc;}
&.xmr {background-image:url(../img/index-tab4-active.png);} span {color:#999;.d-ib;font-size:0.28rem;.txt-ver(0.9rem); background-size:0.5rem 0.5rem; background-repeat: no-repeat; background-position: left center; padding-left: 0.6rem;
&.btc {background-image:url(../img/index-tab5-active.png);} &.ltc {background-image:url(../img/index-tab1.png);}
&.sc {background-image:url(../img/index-tab6-active.png);} &.eth {background-image:url(../img/index-tab2.png);}
&.zcash {background-image:url(../img/index-tab7-active.png);} &.dash {background-image:url(../img/index-tab3.png);}
&.doge {background-image:url(../img/index-tab8-active.png);} &.xmr {background-image:url(../img/index-tab4.png);}
&.btc {background-image:url(../img/index-tab5.png);}
&.sc {background-image:url(../img/index-tab6.png);}
&.zcash {background-image:url(../img/index-tab7.png);}
&.doge {background-image:url(../img/index-tab8.png);}
}
span.active {color:#333;.d-ib;font-size:0.28rem;.txt-ver(0.9rem); background-size:0.5rem 0.5rem; background-repeat: no-repeat; background-position: left center; padding-left: 0.6rem;
&.ltc {background-image:url(../img/index-tab1-active.png);}
&.eth {background-image:url(../img/index-tab2-active.png);}
&.dash {background-image:url(../img/index-tab3-active.png);}
&.xmr {background-image:url(../img/index-tab4-active.png);}
&.btc {background-image:url(../img/index-tab5-active.png);}
&.sc {background-image:url(../img/index-tab6-active.png);}
&.zcash {background-image:url(../img/index-tab7-active.png);}
&.doge {background-image:url(../img/index-tab8-active.png);}
}
} }
} }
.login {
.logo{padding:0.85rem;.tc;
.header-home {height:2.9rem; background:@blue; img {width:3rem; height:auto;}
.logo {width:2.8rem; height:auto;.d-b;} }
&.ios { height:2.7rem; padding-top: 0.2rem;} .form-content {padding:0 1rem;
.el-input__inner {height:0.9rem;border-radius: 0.45rem;font-size:0.32rem;}
.el-form-item__content {line-height: 0.9rem;}
.el-input__prefix {left:0.3rem;}
.el-input--prefix .el-input__inner{padding-left: 0.88rem;}
.iconfont {font-size:0.4rem;}
}
} }
.btn-group { .ohz; .btn-group { .ohz;
button {width: 100%; margin-bottom: 0.4rem;} &.full {
.el-button+.el-button {margin:0} button {width: 100%; margin-bottom: 0.4rem;}
.el-button+.el-button {margin:0}
.el-button.is-round{border-radius: 0.5rem;padding: 0.25rem 0.25rem;}
.el-button {font-size: 0.36rem;}
}
} }
.v {font-size: 0.4rem; color: #252525} .v {font-size: 0.4rem; color: #252525}
.k {font-size:0.26rem; color: #252525; margin-left: 0.1rem;} .k {font-size:0.26rem; color: #252525; margin-left: 0.1rem;}
...@@ -124,4 +150,12 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac ...@@ -124,4 +150,12 @@ html,body {-webkit-tap-highlight-color: rgba(0, 0, 0,0); font-size: 0.28rem; bac
} }
.title {margin-top: 0.1rem;} .title {margin-top: 0.1rem;}
} }
.c-charts {width:100%;height:220px;} .c-charts {width:100%;height:220px;}
\ No newline at end of file .main {margin-top: 50px; min-height: 120vh;}
.mobile-android{
}
.mobile-ios {
.mint-header {padding-top: 20px; box-sizing: content-box;}
}
\ No newline at end of file
src/components/Home.vue
<template> <template>
<div class="warp"> <div class="home">
<div class="header-home" flex="main:center cross:center"><img class="logo" src="../assets/img/logo.png" alt="" /></div> <div class="header" flex="main:center cross:center"><img class="logo" src="../assets/img/logo.png" alt="" /></div>
<div class="swiper-home"> <div class="swiper">
<swiper :options="swiperOption" ref="mySwiper"> <swiper :options="swiperOption" ref="mySwiper">
<!-- slides --> <!-- slides -->
<swiper-slide flex="main:center cross:center" v-for="(coin,coinIdx) in $store.state.cur_coins" :key="coin"><span :class="coinIdx==active?coin+' active':coin+''" @click="changeCoin(coin,coinIdx)">{{coin|uppercase}}</span></swiper-slide> <swiper-slide flex="main:center cross:center" v-for="(coin,coinIdx) in $store.state.cur_coins" :key="coin"><span :class="coinIdx==active?coin+' active':coin+''" @click="changeCoin(coin,coinIdx)">{{coin|uppercase}}</span></swiper-slide>
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
</swiper> </swiper>
</div> </div>
<indexChart :params_coin=coin></indexChart> <indexChart :params_coin=coin></indexChart>
<div class="btn-group mt40 pb40 pl100 pr100"> <div class="btn-group full mt40 pb40 pl100 pr100">
<el-button type="primary" round @click="login" class="button-primary">登录</el-button> <el-button type="primary" round @click="login" class="button-primary">登录</el-button>
<el-button round @click="reg">注册</el-button> <el-button round @click="reg">注册</el-button>
</div> </div>
...@@ -43,7 +43,7 @@ export default { ...@@ -43,7 +43,7 @@ export default {
nextButton: '.swiper-button-next', nextButton: '.swiper-button-next',
observeParents: true, observeParents: true,
debugger: true, debugger: true,
slidesPerView: 2, slidesPerView: 3,
}, },
coin: $store.state.cur_coins[0], coin: $store.state.cur_coins[0],
active: 0 active: 0
......
src/components/Login.vue
<template> <template>
<div class=""> <div class="page login">
{{msg}} <button @click="loginOk">登录成功后！</button> <div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">登录</div>
<div class="btns" @click="goReg">注册</div>
</div>
<div class="page-content">
<div class="logo"><img src="../assets/img/logo2.png" alt="" /></div>
<div class="form-content">
<el-form :model="loginForm" ref="loginForm" label-width="0px">
<el-form-item prop="email" label="" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }]">
<el-input v-model="loginForm.email" placeholder="输入邮箱"><i slot="prefix" class="iconfont icon-email"></i></el-input>
</el-form-item>
<el-form-item prop="password" label="" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]">
<el-input v-model="loginForm.password" type="password" placeholder="输入密码"><i slot="prefix" class="iconfont icon-password"></i></el-input>
</el-form-item>
<el-form-item>
<div class="btn-group full mt100">
<el-button type="primary" round @click="submitForm('loginForm')" class="button-primary">提交</el-button>
</div>
</el-form-item>
</el-form>
</div>
<div class=""></div>
<!-- <button @click="loginOk">登录成功后！</button> -->
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -9,17 +33,35 @@ export default { ...@@ -9,17 +33,35 @@ export default {
data() { data() {
return { return {
msg: '用户登录页', msg: '用户登录页',
loginForm: {
email: '',
password:''
}
} }
}, },
mounted() { mounted() {
}, },
methods: { methods: {
loginOk(){ // loginOk() {
console.log("login ok"); // this.$router.replace('/jump')
this.$router.replace('/jump') // },
} goBack() {
this.$router.go(-1)
},
goReg() {
this.$router.replace("/reg")
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$router.replace('/jump')
} else {
console.log('error submit!!');
return false;
}
});
},
} }
} }
......
src/components/Reg.vue
<template> <template>
<div class=""> <div class="page">
{{msg}}<button @click="loginOk">注册成功后？重新登录：直接跳jump！</button> <div class="page-header" flex="main:justify cross:center">
<div class="back" @click="goBack"><i class="iconfont icon-fanhui"></i></div>
<div class="title">注册</div>
<div class="btns" @click="goLogin">登录</div>
</div>
<div class="page-content">
{{msg}}
<button @click="loginOk">注册成功后？重新登录：直接跳jump！</button>
</div>
</div> </div>
</template> </template>
<script> <script>
...@@ -15,6 +23,12 @@ export default { ...@@ -15,6 +23,12 @@ export default {
}, },
methods: { methods: {
goBack() {
this.$router.go(-1)
},
goLogin() {
this.$router.replace("/login")
}
} }
} }
......
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 sign in to comment