Skip to content

肖康 / H5_2.0

Go to a project
Commit 084799fc by LJM
Options

css

parent 161fa260
Expand all
Inline Side-by-side
Showing with 264 additions and 11 deletions
assets/css/font/iconfont.json
......@@ -6,6 +6,27 @@
"description": "",
"glyphs": [
{
"icon_id": "35603752",
"name": "画板",
"font_class": "huaban",
"unicode": "e79c",
"unicode_decimal": 59292
},
{
"icon_id": "35603730",
"name": "矩形",
"font_class": "juxing4",
"unicode": "e79a",
"unicode_decimal": 59290
},
{
"icon_id": "35603731",
"name": "矩形备份 14",
"font_class": "a-juxingbeifen141",
"unicode": "e79b",
"unicode_decimal": 59291
},
{
"icon_id": "35598904",
"name": "矩形",
"font_class": "juxing3",
......
assets/css/mine/zqsx.scss
.page-zqsx {
.bg {
height: 760rpx;
background: url('https://img.ichunt.com/images/ichunt/202305/20/037958d4bfd087998ada3fbeb60f5eb0.png') no-repeat center;
background-size: cover;
}
.form-box {
position: relative;
top: -128rpx;
margin: 0 24rpx;
padding: 0 24rpx 28rpx 24rpx;
background: #ffffff;
border-radius: 10rpx;
.kefu {
height: 80rpx;
margin-bottom: 24rpx;
border-bottom: 1px solid #f0f0f2;
.iconfont {
font-size: 32rpx;
color: #1969f9;
}
.tt {
font-size: 24rpx;
color: #484b59;
font-weight: 600;
margin-left: 12rpx;
}
}
.input-box {
margin-bottom: 28rpx;
.text {
margin-bottom: 16rpx;
.t1 {
font-size: 24rpx;
color: #1969f9;
}
.t2 {
font-size: 24rpx;
color: #484b59;
}
}
.uni-input {
height: 72rpx;
background: #f5f5f7;
border-radius: 10rpx;
font-weight: 400;
font-size: 24rpx;
text-indent: 24rpx;
}
}
.select-box {
height: 72rpx;
background: #f5f5f7;
border-radius: 10rpx;
.uni-input {
width: 80%;
}
.iconfont {
margin-right: 24rpx;
}
}
.upload-box {
.default {
width: 144rpx;
height: 144rpx;
background: #f5f5f7;
border-radius: 10rpx;
margin-right: 12rpx;
.iconfont {
font-size: 64rpx;
color: #919399;
}
}
.box {
margin-right: 12rpx;
position: relative;
image {
width: 144rpx;
height: 144rpx;
border-radius: 10rpx;
}
.delete {
position: absolute;
right: -18rpx;
top: -20rpx;
width: 44rpx;
height: 44rpx;
background: #ff3700;
border-radius: 50%;
z-index: 99;
.iconfont {
font-size: 32rpx;
color: #ffffff;
}
}
}
}
.btn {
margin-top: 32rpx;
height: 72rpx;
background: #1969f9;
border-radius: 10rpx;
font-size: 28rpx;
color: #ffffff;
}
}
}
.layer-box {
padding: 0 24rpx 30rpx 24rpx;
background: linear-gradient(180deg, #f0f6ff 0%, #ffffff 88rpx);
border-radius: 10rpx 10rpx 0px 0px;
width: 640rpx;
padding: 24rpx;
.title {
height: 88rpx;
margin-bottom: 30rpx;
.left {
width: 33.3%;
font-size: 26rpx;
color: #292b33;
font-weight: 600;
}
.right {
justify-content: flex-end;
width: 33.3%;
.iconfont {
font-size: 40rpx;
color: #c2c4cc;
}
}
.center {
width: 33.3%;
font-size: 24rpx;
color: #292b33;
font-weight: bold;
}
}
.btn {
height: 68rpx;
background: #1969f9;
border-radius: 10px;
font-size: 28rpx;
color: #ffffff;
}
}
pages/mine/zqsx.vue
<template>
<view class="page-user">账期服务</view>
<view class="page-zqsx">
<view class="bg"></view>
<view class="form-box">
<view class="kefu row verCenter">
<text class="iconfont icon-a-juxingbeifen141"></text>
<text class="tt">在线申请</text>
</view>
<view class="input-box column">
<view class="text">
<text class="t1">*</text>
<text class="t2">公司名称：</text>
</view>
<view><input type="text" placeholder="请输入公司名称" class="uni-input" /></view>
</view>
<view class="input-box column">
<view class="text">
<text class="t1">*</text>
<text class="t2">联系人：</text>
</view>
<view><input type="text" placeholder="请输入联系人" class="uni-input" /></view>
</view>
<view class="input-box column">
<view class="text">
<text class="t1">*</text>
<text class="t2">联系电话：</text>
</view>
<view><input type="text" placeholder="请输入联系电话" class="uni-input" /></view>
</view>
<view class="input-box column">
<view class="text">
<text class="t1">*</text>
<text class="t2">邮箱：</text>
</view>
<view><input type="text" placeholder="请输入邮箱" class="uni-input" /></view>
</view>
<view class="input-box column">
<view class="text">
<text class="t1">*</text>
<text class="t2">公司性质：</text>
</view>
<view class="select-box">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="row verCenter bothSide">
<view class="uni-input row verCenter">{{ array[index] }}</view>
<view class="iconfont icon-arrbot"></view>
</view>
</picker>
</view>
</view>
<view class="input-box column">
<view class="text">
<text class="t1">*</text>
<text class="t2">营业执照：</text>
</view>
<view class="upload-box row">
<view class="default row rowCenter verCenter"><text class="iconfont icon-juxing4"></text></view>
<view class="box">
<image src="https://img.ichunt.com/images/ichunt/202305/20/441caaf538f3f5fb4c7b9e735d2401f2.jpg" mode="aspectFill"></image>
<view class="delete row rowCenter verCenter"><text class="iconfont icon-del"></text></view>
</view>
<view class="box">
<image src="https://img.ichunt.com/images/ichunt/202305/20/441caaf538f3f5fb4c7b9e735d2401f2.jpg" mode="aspectFill"></image>
<view class="delete row rowCenter verCenter"><text class="iconfont icon-del"></text></view>
</view>
</view>
</view>
<view class="btn row rowCenter verCenter" @click="submit()">提交</view>
</view>
<!-- 获取电子券信息 -->
<uni-popup ref="popup" type="center">
<view class="layer-box">
<view class="title row verCenter bothSide">
<view class="left"></view>
<view class="right row"><text class="iconfont icon-xxx" @click="close()"></text></view>
</view>
<view class="success"></view>
<view class="btn row rowCenter verCenter">确定</view>
</view>
</uni-popup>
</view>
</template>
<script>
......@@ -7,18 +86,25 @@ import { Api_Url } from '@/util/api.js';
export default {
data() {
return {};
},
onShow() {
this.getData();
return {
index: 0,
array: ['0086', '00886', '00853', '00852']
};
},
onShow() {},
methods: {
getData() {
this.request(Api_Url + '/user/getUserType', 'POST', {}, true, true).then(res => {
if (res.err_code === 0) {
this.userInfo = res.data;
}
});
bindPickerChange: function(e) {
console.log('picker发送选择改变，携带值为', e.detail.value);
this.index = e.detail.value;
},
open() {
this.$refs.popup.open('center');
},
close() {
this.$refs.popup.close();
},
submit() {
this.open();
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment