Browse Source

页面样式

feature-1.0
helming 3 years ago
parent
commit
021e1d8fdc
  1. 99
      pages-userInfo/creatorAccount/createAccount.vue
  2. 92
      pages-userInfo/creatorAccount/creatorAccount.vue
  3. 17
      pages/login/login.vue
  4. BIN
      static/logo-white.png
  5. BIN
      static/logo.png

99
pages-userInfo/creatorAccount/createAccount.vue

@ -3,26 +3,34 @@
<view class="head"> <view class="head">
<view> <view>
<uni-group mode="card"> <uni-group mode="card">
<uni-icons type="paperplane-filled" size="20"></uni-icons><text class="textstyle"></text><br/> <uni-icons custom-prefix="iconfont" type="icon-dengpao" :color="iconColor" size="20"></uni-icons><text class="textstyle text-white"></text><br/>
<text class="textstyle">1.为了您的资金安全及合规体现将通过第三方支付提供安全通道实现</text><br/> <text class="textstyle">1. 为了您的资金安全及合规体现将通过第三方支付提供安全通道实现</text><br/>
<text class="textstyle">2.应银行监管要求每人每月限额10万元最多绑定4个收款账户</text><br/> <text class="textstyle">2. 应银行监管要求每人每月限额10万元最多绑定4个收款账户</text><br/>
<text class="textstyle">3.一旦提现成功,设置的收款账户不可更改</text> <text class="textstyle">3. 一旦提现成功,设置的收款账户不可更改</text>
</uni-group> </uni-group>
</view> </view>
<view> <view>
<uni-group mode="card"> <uni-group mode="card">
<uni-forms validate-trigger='blur' :modelValue="accountInfo" label-position="top" labelWidth="80" ref="form"> <uni-forms validate-trigger='blur' :modelValue="accountInfo" label-position="top" labelWidth="80" ref="form">
<uni-forms-item label="真实姓名" required name="name"> <uni-forms-item label="真实姓名" required name="name">
<uni-easyinput v-model="accountInfo.name" placeholder="请输入真实姓名" /> <uni-easyinput v-model="accountInfo.name" placeholder="请输入真实姓名"
:clearable="false"
:inputBorder="false"/>
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="身份证号" required name="idNo"> <uni-forms-item label="身份证号" required name="idNo">
<uni-easyinput v-model="accountInfo.idNo" placeholder="请输入身份证号" /> <uni-easyinput v-model="accountInfo.idNo" placeholder="请输入身份证号"
:clearable="false"
:inputBorder="false" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="支付宝账号" required name="accountNo"> <uni-forms-item label="支付宝账号" required name="accountNo">
<uni-easyinput v-model="accountInfo.accountNo" placeholder="请输入支付宝账号" /> <uni-easyinput v-model="accountInfo.accountNo" placeholder="请输入支付宝账号"
:clearable="false"
:inputBorder="false" />
</uni-forms-item> </uni-forms-item>
<uni-forms-item label="预留电话" required name="phone"> <uni-forms-item label="预留电话" required name="phone">
<uni-easyinput v-model="accountInfo.phone" placeholder="请输入预留电话" /> <uni-easyinput v-model="accountInfo.phone" placeholder="请输入预留电话"
:clearable="false"
:inputBorder="false" />
</uni-forms-item> </uni-forms-item>
<!-- <uni-forms-item label="请选择" required> <!-- <uni-forms-item label="请选择" required>
@ -52,6 +60,7 @@
export default { export default {
data() { data() {
return { return {
iconColor: '#0b6375',
userInfo: {}, userInfo: {},
existFlag: false, existFlag: false,
upToFourFlag: false, upToFourFlag: false,
@ -261,27 +270,57 @@
} }
</script> </script>
<style lang="less"> <style lang="scss" scoped>
.confirmBtn{ .container {
width: 710rpx; width: 670rpx;
height: 60rpx; height: 100vh;
background-color: royalblue; margin: 0 auto;
color: #ffffff; position: relative;
font-size: 30rpx; }
line-height: 62rpx;
border-radius: 17rpx; .head {
margin-top:100rpx;
} ::v-deep .uni-group--card {
.foot{ margin: 0 0 40rpx 0 !important;
margin-top:100rpx; background: $uni-bg-base-color;
} }
.textstyle{
font-size: 25rpx; ::v-deep .uni-tag {
} border-width: 2rpx !important;
.specialText{ }
color: blue;
// display: inline-block; ::v-deep .uni-forms-item__label {
font-size: 25rpx; color: $uni-white;
} }
::v-deep input {
background: $uni-bg-base-color !important;
border: 0 !important;
color: $uni-white !important;
}
}
.foot {
}
.confirmBtn{
color: $uni-btn-text-color;
}
.textstyle{
font-size: 26rpx;
color: $uni-secondary-color;
}
.text-white {
color: $uni-white !important;
}
.specialText{
color: $uni-primary;
font-size: 26rpx;
}
</style> </style>

92
pages-userInfo/creatorAccount/creatorAccount.vue

@ -9,9 +9,10 @@
<view class="slot-box" v-if="item.type == '2'">支付宝账号{{item.accountNo}}</view> <view class="slot-box" v-if="item.type == '2'">支付宝账号{{item.accountNo}}</view>
<view class="line-box"></view> <view class="line-box"></view>
<view class="btn-box"> <view class="btn-box">
<uni-tag :circle="true" text="设为默认" type="primary" v-if="item.isUse == '0'" class="btn" <uni-tag :circle="true" text="默认账户" type="default" v-if="item.isUse != '0'" class="btn" inverted="true"/>
<uni-tag :circle="true" text="设为默认" type="primary" v-if="item.isUse == '0'" class="btn"
@click="$noMultipleClicks(setDefault,item.id)" inverted="true"/> @click="$noMultipleClicks(setDefault,item.id)" inverted="true"/>
<uni-tag :circle="true" text="删除" type="default" v-if="item.isUse == '0'" class="btn" <uni-tag :circle="true" text="删除" type="error" v-if="item.isUse == '0'" class="btn"
@click="$noMultipleClicks(delAccount,item.id)" inverted="true"/> @click="$noMultipleClicks(delAccount,item.id)" inverted="true"/>
</view> </view>
</uni-group> </uni-group>
@ -153,38 +154,57 @@
} }
</script> </script>
<style lang="less"> <style lang="scss" scoped>
.creatorAccountAddBtn{ .container {
width: 710rpx; width: 670rpx;
height: 60rpx; height: 100vh;
background-color: royalblue; margin: 0 auto;
color: #ffffff; position: relative;
font-size: 30rpx; }
line-height: 62rpx;
border-radius: 17rpx; .head {
margin-top:100rpx;
} ::v-deep .uni-group--card {
.foot{ margin: 20rpx 0 !important;
margin-top:630rpx; background: $uni-bg-base-color;
} }
.slot-box{
font-size: 30rpx; ::v-deep .uni-tag {
text-align: justify; border-width: 2rpx !important;
} }
.line-box{
border: 1rpx #B3B3B3 solid; }
margin-top: 30rpx;
} .foot {
.btn-box{ position: fixed;
position: relative; width: 670rpx;
flex-direction: row; left: 40rpx;
justify-content: flex-end; right: 40rpx;
display: flex; bottom: 60rpx;
margin-left: 200rpx; }
margin-top: 20rpx;
.btn{ .creatorAccountAddBtn{
padding-left: 20rpx; color: $uni-btn-text-color;
} }
}
.slot-box{
font-size: 30rpx;
text-align: justify;
color: $uni-secondary-color;
}
.line-box{
border-bottom: 2rpx $uni-secondary-color solid;
margin-top: 30rpx;
}
.btn-box{
display: flex;
flex-direction: row;
justify-content: flex-end;
margin-left: 200rpx;
margin-top: 20rpx;
.btn{
padding-left: 20rpx;
}
}
</style> </style>

17
pages/login/login.vue

@ -1,7 +1,9 @@
<template> <template>
<view class="login-body uni-bg-color"> <view class="login-body uni-bg-color">
<div class="auto-center"> <div class="auto-center">
<div class="logo-div">^_^</div> <div class="logo-div">
<image class="logo" src="/static/logo-white.png" mode=""></image>
</div>
<div class="welcome-text"> <div class="welcome-text">
<p class="welcome-title uni-white">进入次元Hub</p> <p class="welcome-title uni-white">进入次元Hub</p>
<p class="welcome-subtitle uni-secondary-color">开启你的创作之旅~</p> <p class="welcome-subtitle uni-secondary-color">开启你的创作之旅~</p>
@ -165,24 +167,29 @@
<style scoped lang="scss"> <style scoped lang="scss">
.login-body { .login-body {
min-height: 100vh; min-height: 100vh;
background-color: #141b29; background-color: $uni-bg-color;
.auto-center { .auto-center {
width: 622rpx; width: 622rpx;
margin: 0 auto; margin: 0 auto;
border-top: 1rpx solid #141b29; border-top: 1rpx solid $uni-bg-color;
border-bottom: 1rpx solid #141b29; border-bottom: 1rpx solid $uni-bg-color;
} }
.logo-div { .logo-div {
width: 86rpx; width: 86rpx;
height: 86rpx; height: 86rpx;
background: linear-gradient(180.00deg, #0b6375 0%, #0b6375 100%); background: linear-gradient(180.00deg, $uni-primary 0%, $uni-primary 100%);
border-radius: 24rpx; border-radius: 24rpx;
margin-top: 154rpx; margin-top: 154rpx;
text-align: center; text-align: center;
line-height: 86rpx; line-height: 86rpx;
font-weight: 600; font-weight: 600;
.logo {
width: 86rpx;
height: 86rpx;
}
} }
.welcome-text { .welcome-text {
margin-top: 72rpx; margin-top: 72rpx;

BIN
static/logo-white.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
static/logo.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Loading…
Cancel
Save