<template>
	<view class="box">
		<view class="content" :style="{backgroundImage: 'url(../../static/reg/'+ num + '.jpg)'}">
		    <view class="reg clearfix">
		        <view class="reg-box">
		            <!-- 左盒子 -->
		            <view class="box-left">
		                <!-- 左边实际框 -->
		                <view class="regui">
		                    <view class="zhuce">
		                        <input type="text" placeholder="你的手机号"  auto-focus="true"  class="phone"/>  
		                    </view>
		                    <view class="btn">                            
		                        <button class="reg-btn">立即注册</button>
		                    </view>
		                    <!-- 协议 -->
		                    <view class="agreement">
		                        <navigator url="#"><<马蜂窝用户使用协议>></navigator>
		                        <view>注册视为同意</view>
		                    </view>
		                    <!-- icon -->
		                   
		                </view>
		                <!-- 图标 -->
		                <view class="icon-box">
		                   <view class="icon-title">用合作网账户直接登录</view>
		                   <view class="icons">
		                       <navigator url="#"></navigator>
		                       <navigator url="#"></navigator>
		                       <navigator url="#"></navigator>
		                   </view>
		                </view>
		            </view>
		            <!-- 右盒子 -->
		            <view class="box-right">
		                <navigator url="#" class="download">
		                    
		                </navigator>
		            </view>
		        </view>
		        <view class="bottom">
		            <view>已经注册?</view>
		            <navigator url="#">
		                马上登录
		            </navigator>
		        </view>
		    </view> 
		</view>
	</view>
   
</template>

<script>
    export default {
        data() {
            return {
                num:1,
                
                // backImg:url(`../../static/reg/{{this.num}}.jpg`)
            }
        },
        methods: {
            
        },
        onLoad() {
            this.num=parseInt(Math.random()*10)
			console.log(this.num)
        }
    }
</script>

<style lang="scss">
	.box::before{
		// background-image: url(../../static/reg/full_page_vignette.png) ;
		 background: url(../../static/reg/full_page_vignette.png)  0 0 rgba(0,0,0,0.2);
		background-size: 100%;
		bottom: 0;
		content: '';
		left: 0;
		right: 0;
		top: 0;
		position: fixed;
		opacity: .5;
		z-index: 2;
	}
    .content{
        width: 100vw;
        height: 100vh;
        background-position: 50% 50%;
        background-size: cover;
        position: relative;
        &::before{
            
        }
        .reg{
            width: 100%;
            position: absolute;
            top: 22%;
            overflow: hidden;
            //内容
            .reg-box{
                margin: 0 auto;
                width: 730px;
                height: 434px;
                background-color: #fff;
                border-radius: 8px;
                box-shadow: 0 3px 3px rgba(0,0,0, 0.4);
                .box-left{
                    position: relative;
                    width: 440px;
                    height: 434px;
                    padding: 0 58px 0 62px;
                    box-sizing: border-box;
                    float: left;
                    .regui{
                        height: calc(100% - 97px);
                        box-sizing: border-box;
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        
                        .phone{
                            border-radius: 6px;
                            // border-color: #;
                            background-color: #f6f7f9;
                            width: 306px;
                            height: 28px;
                            border: 1px solid #f6f7f9;
                            font-size: 14px;
                            color: #666;
                            line-height: 28px;
                            padding: 6px 0 6px 12px;
                            box-shadow:  0 0 5px #fff;;
                            outline: 0;;
                        }
                        .btn{
                             padding: 17px 0 0 ;
                            .reg-btn{
                               background-color: $color;
                               color: #FFFFFF;
                               border-radius: 6px;
                               font-size: 18px;
                               font-weight: 500;
                               width: 320px;
                               height: 42px;
                               border: 0;
                               text-align: center;
                               line-height: 40px;
                              
                            }
                        }
                        .agreement{
                            display: flex;
                            flex-direction: row-reverse;
                            font-size: 12px;
                            padding: 10px 0 ;
                            color: #666;
                            &>:nth-child(2){
                                color: #aaa;
                                margin-right: 10px;
                            }
                        }
                    }
                   
                    .icon-box{
                        background: linear-gradient(270deg,rgba(246,247,249,0.3) 0,rgba(246,247,249,1) 100%);             
                        position: absolute;
                        height: 97px;
                        left: 0;
                        bottom: 0;
                        right: 0;
                        overflow: hidden;
                        padding: 0 41px;
                        .icon-title{
                            padding: 12px 0 ;
                            color: rgb(148,150,154);
                            line-height: 20px;
                            font-size: 14px;
                        }
                        .icons{
                         display: flex;
                       
                          &>navigator{
                              width: 34px;
                              height: 34px;
                              margin-right: 32px;
                              background-size: 34px;
                              transition: all .3s;
                          }
                         &>navigator:nth-child(1){
                             background-image:url(../../static/reg/ic_weibo.png);
                         }
                         &>navigator:nth-child(1):hover{
                             background-image:url(../../static/reg/ic_weibo_sel.png);
                         }
                         &>navigator:nth-child(2){
                             background-image:url(../../static/reg/ic_qq.png);
                         }
                         &>navigator:nth-child(2):hover{
                             background-image:url(../../static/reg/ic_qq_sel.png);
                         }
                         &>navigator:nth-child(3){
                             background-image:url(../../static/reg/ic_weixin.png);
                         }
                         &>navigator:nth-child(3):hover{
                             background-image:url(../../static/reg/ic_weixin_sel.png);
                         }
                        
                        }
                    }
                }
                .box-right{
                    float: right;
                    width: 290px;
                    height: 434px;
                    box-sizing: border-box;
                    border-radius: 0 8px 8px 0;
                    position: relative;
                    background-image: url(../../static/reg/img_download.png);
                    .download{
                        position: absolute;
                        bottom: 15px;
                        // background-color: pink;
                        width: 30px;
                        height: 30px;
                        right: 15px;
                        cursor: pointer;
                    }
                }
            }
            
            //下方提示
            .bottom{
                width: 140px;
                margin: 10px auto;
                border-radius: 15px;
                background-color: rgba(0,0,0,.4);
                text-align: center;
                font-size: 12px;
                color: #fff;
                padding: 4px 0 ;
                text-shadow: 1px 1px 1px rgba(0,0,0,.4);
                display: flex;
                justify-content: center;
                navigator{
                    color: $color;
                }
            }
        }
    }
</style>
