sys 2 年 前
コミット
0b4a864862

+ 2 - 3
App.vue

@@ -14,9 +14,8 @@ export default {
 
 <style>
 /*每个页面公共css */
-@import "./common/css/common";
-/* icon */
-@import "./common/font/iconfont";
+@import "./static/css/sys.css";
+
 
 checkbox .wx-checkbox-input {
   border-radius: 50% !important;

+ 6 - 2
pages/login/login.vue

@@ -1,7 +1,10 @@
 <template>
   <view class="login-box">
     <view class="video-background">
-      <video src="@/static/video/login_bg.mp4"
+      <!--          src="@/static/video/login_bg.mp4"-->
+      <video
+
+          src="https://jhvideo.oss-cn-hangzhou.aliyuncs.com/video/login_bg.mp4"
              object-fit="cover"
              :autoplay="true"
              :controls="false"
@@ -23,7 +26,8 @@ export default {
   data() {
     return {
       VideoContext: {},
-      showContent:false
+      showContent:false,
+
     }
   },
   onLoad(query) {

+ 51 - 20
pages/login/model/loginContent.nvue

@@ -4,15 +4,22 @@
 
       <view class="data">
         <view class="data-img">
-          <image class="img" src="@/static/img/login/2.jpg" mode="aspectFill"></image>
+          <image class="img" src="@/static/img/common/logo.png" mode="aspectFill"></image>
         </view>
         <view class="data-text">
           ICOCO是为了人们摆脱自己单身的生活 而去结交 认识他人的过程一个网络交友平台
         </view>
         <view class="data-but">
-          <view class="but-text">开始ICOCO</view>
+<!--          开始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 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>
-        <view class="data-agreement"></view>
       </view>
     </view>
   </view>
@@ -24,13 +31,19 @@ export default {
   components: {},
   props: {},
   data() {
-    return {}
+    return {
+      isCheck:false
+    }
   },
   watch: {},
   mounted() {
 
   },
-  methods: {}
+  methods: {
+    setIsCheck(){
+      this.isCheck=!this.isCheck
+    }
+  }
 }
 </script>
 
@@ -57,13 +70,14 @@ export default {
   left: 0;
 }
 .content-data .data .data-img{
+  width: 100vw;
   height: 124rpx;
-  border-radius: 24rpx;
 }
 .content-data .data-img .img{
-  margin: auto auto;
+  margin-left: calc((100vw - 124rpx) / 2);
   height: 124rpx;
   width: 124rpx;
+  border-radius: 24rpx;
 }
 .content-data .data .data-text{
   margin-top: 24rpx;
@@ -75,22 +89,39 @@ export default {
 .content-data .data .data-but{
   margin:64rpx 78rpx 0 78rpx ;
   border-radius: 200rpx;
-  background:#FFFFFF ;
-  height: 88rpx;
-  line-height: 88rpx;
-
+  /*background:#FFFFFF ;*/
+  /*height: 88rpx;*/
+  /*line-height: 88rpx;*/
+  /*color: #000000;*/
+  /*font-size: 28rpx;*/
+  /*font-weight: 600;*/
+  /*text-align: center;*/
+  /*mix-blend-mode: darken;*/
+  /*-webkit-background-clip: text;*/
+  /*-webkit-text-fill-color: transparent;*/
 
 }
-.data-but .but-text{
-  background: #000;
-  color: #000;
-  font-size: 28rpx;
-  font-weight: 600;
-  text-align: center;
+.data-but .but-img{
   height: 88rpx;
-  line-height: 88rpx;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+  border-radius: 200rpx;
+  width: calc(100vw - 156rpx);
+}
+
+.data-agreement{
+  margin-top: 40rpx;
+  display: flex;
+  justify-content: center;
+}
+.data-agreement .agreement-img{
+  width: 24rpx;
+  height: 24rpx;
+  border-radius: 4rpx;
+  margin-right: 6rpx;
+  /*border: 2rpx solid #FFFFFF;*/
+}
+.data-agreement .agreement-text{
+  line-height: 24rpx;
+    margin-left: 6rpx;
 }
 
 </style>

+ 12 - 0
static/css/sys.css

@@ -0,0 +1,12 @@
+.sys-size-24{
+  font-size: 24rpx;
+}
+.sys-weight-600{
+  font-weight: 600;
+}
+.sys-color-white{
+  color: #fff;
+}
+.sys-color-green{
+  color: #12CE87;
+}

+ 0 - 4
static/css/sys.scss

@@ -1,4 +0,0 @@
-
-.sys-size-600{
-  font-weight: 600;
-}

BIN
static/img/common/logo.png


BIN
static/img/login/check-no.png


BIN
static/img/login/check-ok.png


BIN
static/img/login/login-but.png