123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125 |
- <template>
- <view class="step2">
- <view class="step2-from">
- <view class="title">请选择角色</view>
- <view class="role-list">
- <view class="role-item" @tap="user_type=1" :class="{'selected':user_type===3}">
- <image src="../../static/images/woman.png" mode="scaleToFill" style="width: 144upx;height: 144upx;"></image>
- <view class="text"><text>网店店主</text></view>
- </view>
- <view class="role-item" @tap="user_type=2" :class="{'selected':user_type===2}">
- <image src="../../static/images/man.png" mode="scaleToFill" style="width: 144upx;height: 144upx;"></image>
- <view class="text"><text>直供厂家</text></view>
- </view>
- </view>
- <view class="button-item" style="margin-top: 80upx;">
- <navigator :url="'/pages/register/step3?user_type='+user_type+'&invite_code='+invite_code" open-type="navigate">
- <button class="next">下一步</button>
- </navigator>
- </view>
- </view>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- user_type: 3,
- invite_code: "",
- }
- },
- methods: {
- },
- onLoad: function(option) {
- this.invite_code = option.invite_code;
- }
- }
- </script>
- <style lang="scss" scoped>
- .step2 {
- background: $primary-color;
- height: 100vh;
- width: 750rpx;
- overflow: hidden;
- }
- .step2-from {
- margin: auto;
- width: 600upx;
- height: 700upx;
- background-color: white;
- border-radius: 20rpx;
- padding: 72upx;
- padding-top: 40upx;
- box-sizing: border-box;
- position: relative;
- z-index: 2;
- margin-top: 200upx;
- &::after {
- content: "";
- background: url(../../static/images/login/box-bottom.png) no-repeat;
- background-size: contain;
- width: 564upx;
- height: 30upx;
- display: block;
- position: absolute;
- bottom: -30upx;
- left: 18upx;
- z-index: -1;
- }
- .title {
- font-size: 30upx;
- color: #999999;
- font-weight: bold;
- text-align: center;
- margin-bottom: 70upx;
- }
- }
- .role-list {
- display: flex;
- justify-content: center;
- .role-item {
- margin: 50upx;
- text-align: center;
- position: relative;
- .text {
- font-size: 30upx;
- color: #666666;
- }
- &.selected::after {
- background-image: url(../../static/images/icon71.png);
- content: "";
- width: 40upx;
- height: 40upx;
- display: block;
- position: absolute;
- top: 5upx;
- right: 5upx;
- }
- }
- }
- .next {
- height: 80upx;
- border: 2upx solid $primary-color;
- line-height: 80upx;
- margin: 30upx 0;
- font-size: 32upx;
- background: $primary-color;
- color: white;
- &::after {
- border: none;
- }
- }
- </style>
|