<template>
    <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>
</template>

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

<style lang="scss">
    .content{
        width: 100vw;
        height: 100vh;
        background-position: 50% 50%;
        background-size: cover;
        position: relative;
        &::before{
             background-size: 100%;
             background: url(../../static/reg/full_page_vignette.png) 0 0 rgba(0,0,0,0.3);
             bottom: 0;
             position: fixed;
             content: '';
             left: 0;
             opacity: .5;
             right: 0;
             top: 0;
        }
        .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>
