master
xy 1 year ago
parent 67e25f7cdb
commit 224ba915ca

@ -1,18 +1,103 @@
<template>
<view class="container">
<view class="container safe-area-inset-bottom">
<image class="bkg" src="~@/static/me/wave.png" mode="widthFix"></image>
<view class="wrap">
<view class="card">
<u-form :model="form" ref="uForm" label-width="auto">
<u-form-item label="学生姓名">
<u-input v-model="form.name" input-align="right" />
</u-form-item>
<u-form-item label="性别">
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
<u-form-item label="年级" required>
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
<u-form-item label="中考年份" required>
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
<u-form-item label="民族">
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
<u-form-item label="所在城市" required>
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
<u-form-item label="所在县区" required>
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
<u-form-item label="所在学校" required>
<u-input type="select" v-model="form.name" placeholder="请选择" input-align="right" />
</u-form-item>
</u-form>
</view>
<view class="card">
<view class="card__title">成绩</view>
<view class="score">
<view class="score-row">
<view class="score-row__text">初始成绩</view>
<u-input placeholder="输入分数" placeholder-style="text-align: center;" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
<u-input style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
</view>
<view class="score-row">
<view class="score-row__text">一模成绩</view>
<u-input placeholder="输入分数" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
<u-input style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
</view>
<view class="score-row">
<view class="score-row__text">估分成绩</view>
<u-input placeholder="输入分数" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
<u-input style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
</view>
<view class="score-row">
<view class="score-row__text">精准成绩</view>
<u-input placeholder="输入分数" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
<u-input style="margin-left: 20rpx;" placeholder="输入年级名次" input-align="center" border border-color="#e0e0e0" :height="48" :clearable="false"></u-input>
</view>
</view>
</view>
<u-button
shape="circle"
:custom-style="{
background: 'linear-gradient(to right, #2e63ef, #4186f2)',
height: '76rpx',
'line-height': '76rpx',
'color': '#fff',
'font-size': '33rpx',
'letter-spacing': '5rpx',
'width': '450rpx',
'margin': '130rpx auto 0'
}">保存</u-button>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
return {
form: {
name: '',
}
};
}
}
</script>
<style lang="scss">
.u-input__right-icon {
margin-left: 32rpx;
}
.u-form-item--left__content--required {
color: #e77817;
padding: 0 20rpx 0 18rpx;
}
.u-form-item--left__content__label {
margin-left: 56rpx;
}
.container {
position: relative;
min-height: 100vh;
@ -25,4 +110,57 @@ export default {
top: 0;
left: 0;
}
.wrap {
padding: 60rpx 0;
.card {
margin: 20rpx 24rpx 0;
border-radius: 20rpx;
filter: drop-shadow(-2.179rpx 3.355rpx 2.5rpx rgba(208,209,209,0.3));
background-color: #ffffff;
padding: 32rpx 36rpx 40rpx 40rpx;
&__title {
display: inline-block;
font-size: 30rpx;
text-transform: uppercase;
color: #333333;
font-weight: 500;
padding: 0 10rpx;
z-index: 3;
position: relative;
&::after {
content: '';
background: linear-gradient(to right, #2e63ef, #4187f2);
height: 6rpx;
border-radius: 4rpx;
z-index: 0;
position: absolute;
bottom: 4rpx;
left: 0;
right: 0;
}
}
}
}
.score {
margin-top: 42rpx;
&-row {
display: flex;
align-items: center;
&__text {
word-break: keep-all;
padding: 0 40rpx 0 20rpx;
font-size: 28rpx;
text-transform: uppercase;
color: #333333;
}
}
&-row + &-row {
margin-top: 20rpx;
}
}
</style>

@ -55,7 +55,7 @@
@input="handleInput"
@confirm="onConfirm"
/>
<view class="u-input__right-icon u-flex">
<view class="u-input__right-icon u-flex" v-if="clearable">
<view class="u-input__right-icon__clear u-input__right-icon__item" @tap="onClear" v-if="clearable && value != '' && focused">
<u-icon size="32" name="close-circle-fill" color="#c0c4cc"/>
</view>

Loading…
Cancel
Save