|
@@ -1,24 +1,31 @@
|
|
|
<template>
|
|
<template>
|
|
|
<view class="login-content" @touchmove.stop.prevent>
|
|
<view class="login-content" @touchmove.stop.prevent>
|
|
|
- <view class="content-data">
|
|
|
|
|
-
|
|
|
|
|
- <view class="data">
|
|
|
|
|
- <view class="data-img">
|
|
|
|
|
- <image class="img" src="@/static/img/common/logo.png" mode="aspectFill"></image>
|
|
|
|
|
- </view>
|
|
|
|
|
- <view class="data-text">
|
|
|
|
|
|
|
+ <view class="data">
|
|
|
|
|
+ <view class="data-img">
|
|
|
|
|
+ <image :style="{'margin-left':((windowWidth-124)/2)+'rpx'}" class="img" src="/static/img/common/logo.png" mode="aspectFill"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="data-text">
|
|
|
|
|
+ <text class="text-content" :style="{'width':(windowWidth-156)+'rpx'}">
|
|
|
ICOCO是为了人们摆脱自己单身的生活 而去结交 认识他人的过程一个网络交友平台
|
|
ICOCO是为了人们摆脱自己单身的生活 而去结交 认识他人的过程一个网络交友平台
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="data-but" >
|
|
|
|
|
+ <!-- 开始ICOCO-->
|
|
|
|
|
+ <image class="but-img" src="/static/img/login/login-but.png" mode="aspectFill"></image>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="data-agreement">
|
|
|
|
|
+ <image class="agreement-img" @click="setIsCheck" :src="'/static/img/login/check-'+(isCheck?'ok':'no')+'.png'" mode="aspectFill"></image>
|
|
|
|
|
+ <view class="agreement-text" @click="setIsCheck">
|
|
|
|
|
+ <text class="text-item sys-size-24 sys-color-white">我已阅读并同意</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="agreement-text ">
|
|
|
|
|
+ <text class="text-item sys-size-24 sys-color-green">《用户协议》</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="data-but">
|
|
|
|
|
-<!-- 开始ICOCO-->
|
|
|
|
|
- <image class="but-img" src="@/static/img/login/login-but.png" mode="aspectFill"></image>
|
|
|
|
|
|
|
+ <view class="agreement-text ">
|
|
|
|
|
+ <text class="text-item sys-size-24 sys-color-white">和</text>
|
|
|
</view>
|
|
</view>
|
|
|
- <view class="data-agreement">
|
|
|
|
|
- <image class="agreement-img" @click="setIsCheck" :src="'/static/img/login/check-'+(isCheck?'ok':'no')+'.png'" mode="aspectFill"></image>
|
|
|
|
|
- <view class="agreement-text sys-size-24 sys-color-white">我已阅读并同意</view>
|
|
|
|
|
- <view class="agreement-text sys-size-24 sys-color-green">《用户协议》</view>
|
|
|
|
|
- <view class="agreement-text sys-size-24 sys-color-white">和</view>
|
|
|
|
|
- <view class="agreement-text sys-size-24 sys-color-green">《隐私政策》</view>
|
|
|
|
|
|
|
+ <view class="agreement-text ">
|
|
|
|
|
+ <text class="text-item sys-size-24 sys-color-green">《隐私政策》</text>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
|
</view>
|
|
</view>
|
|
@@ -26,18 +33,26 @@
|
|
|
</template>
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
<script>
|
|
|
|
|
+import tools from "@/service/tools";
|
|
|
|
|
+
|
|
|
export default {
|
|
export default {
|
|
|
name: "loginContent",
|
|
name: "loginContent",
|
|
|
components: {},
|
|
components: {},
|
|
|
props: {},
|
|
props: {},
|
|
|
data() {
|
|
data() {
|
|
|
return {
|
|
return {
|
|
|
- isCheck:false
|
|
|
|
|
|
|
+ isCheck:false,
|
|
|
|
|
+ windowWidth:750
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
watch: {},
|
|
watch: {},
|
|
|
|
|
+ onLoad(query) {
|
|
|
|
|
+ },
|
|
|
mounted() {
|
|
mounted() {
|
|
|
-
|
|
|
|
|
|
|
+ // let width = uni.getSystemInfoSync().windowWidth;
|
|
|
|
|
+ // this.windowWidth=width*2
|
|
|
|
|
+ // tools.success('width:'+width)
|
|
|
|
|
+ // console.log('width:'+width)
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
setIsCheck(){
|
|
setIsCheck(){
|
|
@@ -47,7 +62,7 @@ export default {
|
|
|
}
|
|
}
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
-<style scoped>
|
|
|
|
|
|
|
+<style scoped lang="scss">
|
|
|
.login-content{
|
|
.login-content{
|
|
|
z-index: 100;
|
|
z-index: 100;
|
|
|
position: fixed;
|
|
position: fixed;
|
|
@@ -55,38 +70,43 @@ export default {
|
|
|
top: 0;
|
|
top: 0;
|
|
|
right: 0;
|
|
right: 0;
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
- background-color: rgba(0, 0, 0, 0);
|
|
|
|
|
|
|
+ /*background-color: rgba(0, 0, 0, 0);*/
|
|
|
|
|
+ /*background: #fff;*/
|
|
|
}
|
|
}
|
|
|
-.content-data{
|
|
|
|
|
- width: 100vw;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- position: relative;
|
|
|
|
|
-}
|
|
|
|
|
-.content-data .data{
|
|
|
|
|
|
|
+
|
|
|
|
|
+.login-content .data{
|
|
|
position: absolute;
|
|
position: absolute;
|
|
|
- width: 100vw;
|
|
|
|
|
- height: calc(528rpx + env(safe-area-inset-bottom)) ;
|
|
|
|
|
|
|
+ /*width: 100vw;*/
|
|
|
|
|
+ height: 528rpx;
|
|
|
bottom: 0;
|
|
bottom: 0;
|
|
|
left: 0;
|
|
left: 0;
|
|
|
}
|
|
}
|
|
|
-.content-data .data .data-img{
|
|
|
|
|
- width: 100vw;
|
|
|
|
|
|
|
+.login-content .data .data-img{
|
|
|
|
|
+ /*width: 100vw;*/
|
|
|
height: 124rpx;
|
|
height: 124rpx;
|
|
|
}
|
|
}
|
|
|
-.content-data .data-img .img{
|
|
|
|
|
- margin-left: calc((100vw - 124rpx) / 2);
|
|
|
|
|
|
|
+.login-content .data-img .img{
|
|
|
|
|
+ /*margin-left: calc((100vw - 124rpx) / 2);*/
|
|
|
height: 124rpx;
|
|
height: 124rpx;
|
|
|
width: 124rpx;
|
|
width: 124rpx;
|
|
|
border-radius: 24rpx;
|
|
border-radius: 24rpx;
|
|
|
}
|
|
}
|
|
|
-.content-data .data .data-text{
|
|
|
|
|
|
|
+.login-content .data .data-text{
|
|
|
margin-top: 24rpx;
|
|
margin-top: 24rpx;
|
|
|
padding: 0 78rpx;
|
|
padding: 0 78rpx;
|
|
|
- font-size: 28rpx;
|
|
|
|
|
line-height: 44rpx;
|
|
line-height: 44rpx;
|
|
|
|
|
+
|
|
|
|
|
+}
|
|
|
|
|
+.login-content .data .data-text .text-content{
|
|
|
|
|
+ //width: calc( 100vw - 156rpx );
|
|
|
|
|
+ font-size: 24rpx;
|
|
|
color: #FFFFFF;
|
|
color: #FFFFFF;
|
|
|
|
|
+ display:inline-block;
|
|
|
|
|
+ white-space: pre-wrap;
|
|
|
|
|
+ word-wrap: break-word;
|
|
|
|
|
+ height: auto;
|
|
|
}
|
|
}
|
|
|
-.content-data .data .data-but{
|
|
|
|
|
|
|
+.login-content .data .data-but{
|
|
|
margin:64rpx 78rpx 0 78rpx ;
|
|
margin:64rpx 78rpx 0 78rpx ;
|
|
|
border-radius: 200rpx;
|
|
border-radius: 200rpx;
|
|
|
/*background:#FFFFFF ;*/
|
|
/*background:#FFFFFF ;*/
|
|
@@ -104,13 +124,16 @@ export default {
|
|
|
.data-but .but-img{
|
|
.data-but .but-img{
|
|
|
height: 88rpx;
|
|
height: 88rpx;
|
|
|
border-radius: 200rpx;
|
|
border-radius: 200rpx;
|
|
|
- width: calc(100vw - 156rpx);
|
|
|
|
|
|
|
+ /*width: calc(100vw - 156rpx);*/
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.data-agreement{
|
|
.data-agreement{
|
|
|
margin-top: 40rpx;
|
|
margin-top: 40rpx;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
+ flex-direction:row;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+
|
|
|
}
|
|
}
|
|
|
.data-agreement .agreement-img{
|
|
.data-agreement .agreement-img{
|
|
|
width: 24rpx;
|
|
width: 24rpx;
|