powerbank/page_user/hezuo/index.vue
2024-05-15 18:01:50 +08:00

155 lines
3.3 KiB
Vue

<template>
<view class="page">
<u-navbar title="合作加盟" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
height='38'></u-navbar>
<view class="box">
<image src="https://api.ccttiot.com/smartmeter/img/static/u7CKiZqacBOcqYyDWDGF" mode="" class="pic"></image>
<view class="inp" style="margin-top: 46rpx;">
<image src="https://api.ccttiot.com/smartmeter/img/static/uft7OxFUV7v09RCwhpfo" mode=""></image>
<view class="one">您的手机号</view>
<input type="text" placeholder="请输入您的手机号" />
</view>
<view class="inp" style="position: relative;">
<image src="https://api.ccttiot.com/smartmeter/img/static/uft7OxFUV7v09RCwhpfo" mode=""></image>
<view class="one">验证码</view>
<input type="text" placeholder="请输入验证码" />
<view class="hq">获取验证码</view>
</view>
<view class="inp">
<image src="https://api.ccttiot.com/smartmeter/img/static/uft7OxFUV7v09RCwhpfo" mode=""></image>
<view class="one">合作意向</view>
<input type="text" :placeholder="tit" disabled="false" @click="btnxz" />
</view>
<view class="anniu">
马上加盟
</view>
<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
</view>
</view>
</template>
<script>
export default {
data() {
return {
bgc: {
background: '#25CE88'
},
show: false,
tit:'请选择您的合作意向',
list: [{
value: '1',
label: '成为充电合作商'
},
{
value: '2',
label: '门店铺设充电宝'
},
{
value: '2',
label: '贴牌OEM'
}
],
}
},
methods: {
btnxz() {
this.show = true
},
confirm(e){
this.tit = e[0].label
}
}
}
</script>
<style lang="scss">
page {
// background: linear-gradient(180deg, #25CE88 0%, rgba(255, 255, 255, 0) 100%);
}
.page {
width: 750rpx;
position: fixed;
top: 0;
left: 0;
.box {
width: 750rpx;
height: 1440rpx;
background: #F4F5F7;
border-radius: 0rpx 0rpx 0rpx 0rpx;
.anniu {
width: 558rpx;
height: 90rpx;
background: linear-gradient(270deg, #54DAA1 0%, #19CD82 100%);
border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500;
font-size: 36rpx;
color: #FFFFFF;
text-align: center;
line-height: 90rpx;
margin: auto;
margin-top: 84rpx;
margin-bottom: 218rpx;
}
.pic {
width: 748rpx;
height: 768rpx;
}
.inp {
display: flex;
font-weight: 500;
font-size: 32rpx;
padding: 10rpx 60rpx;
box-sizing: border-box;
color: #3D3D3D;
.one {
width: 154rpx;
}
.hq {
width: 136rpx;
height: 50rpx;
background: #38D492;
border-radius: 6rpx 6rpx 6rpx 6rpx;
text-align: center;
// line-height: 40rpx;
font-size: 24rpx;
color: #FFFFFF;
padding: 4rpx 8rpx;
box-sizing: border-box;
position: absolute;
top: 14rpx;
right: 67rpx;
z-index: 99;
}
image {
width: 14rpx;
height: 14rpx;
margin-top: 12rpx;
margin-right: 10rpx;
}
input {
width: 400rpx;
height: 52rpx;
border-radius: 6rpx 6rpx 6rpx 6rpx;
border: 2rpx solid #979797;
padding-left: 20rpx;
font-weight: 500;
font-size: 32rpx;
color: #979797;
margin-left: 28rpx;
}
}
}
}
</style>