20 changed files with 662 additions and 161 deletions
Unified View
Diff Options
-
9apis/clientCreditApi.js
-
29apis/commonApi.js
-
2common/css/reset.scss
-
0components/qn-data-picker/keypress.js
-
2components/qn-data-picker/qn-data-picker.vue
-
0components/qn-data-pickerview/qn-data-picker.js
-
0components/qn-data-pickerview/qn-data-pickerview.vue
-
84components/qn-form/qn-form.vue
-
335pages.json
-
2pages/add-user/index.vue
-
0pages/client-credit-limit/index.vue
-
0pages/client-credit-list/index.vue
-
267pages/client-credit/index.vue
-
0pages/client-signing/index.vue
-
15pages/login/index.vue
-
6pages/mine/index.vue
-
BINstatic/imgs/client-credit/fs-credit-icon.png
-
BINstatic/imgs/client-credit/month-credit-icon.png
-
BINstatic/imgs/client-credit/selected-icon.png
-
72store/index.js
@ -0,0 +1,9 @@ |
|||||
|
import http from '../utils/http/index.js' |
||||
|
|
||||
|
// 根据名称模糊查询企业列表
|
||||
|
export function getCompanyList(data) { |
||||
|
return http.get({ |
||||
|
url: '/base-paper-trading/get/customers/enterprise/basic/list', |
||||
|
data |
||||
|
}) |
||||
|
} |
||||
@ -0,0 +1,84 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<template v-for="column in columns"> |
||||
|
<view :key="column.key" v-if="column.type === 'title'" class="qn-form-item qn-form-item__title"> |
||||
|
<text class="title">{{ column.label }}</text> |
||||
|
</view> |
||||
|
<view |
||||
|
:key="column.key" |
||||
|
v-if="column.type === 'item'" |
||||
|
class="qn-form-item qn-form-item" |
||||
|
:style="{ flexWrap: column.size === 'large' ? 'wrap' : 'nowrap' }" |
||||
|
> |
||||
|
<view class="label" :style="{ marginTop: column.size === 'large' ? '18rpx' : '' }"> |
||||
|
<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons> |
||||
|
<text class="label__text">{{ column.label }}</text> |
||||
|
</view> |
||||
|
<view class="value" :style="{ marginTop: column.size === 'large' ? '10rpx' : '' }"> |
||||
|
<slot :name="column.slot || column.key"></slot> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
/** |
||||
|
* @property {Array} columns {type:'title | item',label:'表单项,slot:'插槽名',required:false} |
||||
|
* @value key key 在columns中的key,同时也是插槽名 |
||||
|
* @value type 类型 title:标题 item:表单项 |
||||
|
* @value label 表单项名称 |
||||
|
* @value slot 插槽名 不填则默认使用key做插槽名 |
||||
|
* @value required 是否必填 默认false |
||||
|
* @value size 表单项大小 默认normal ,可选值:normal,large |
||||
|
*/ |
||||
|
export default { |
||||
|
props: { |
||||
|
columns: { |
||||
|
type: Array, |
||||
|
default: () => [] |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.qn-form-item { |
||||
|
width: 750rpx; |
||||
|
padding: 0rpx 32rpx; |
||||
|
background-color: #fff; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
border-bottom: 2rpx solid #d8d8d8; |
||||
|
min-height: 80rpx; |
||||
|
.label { |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
margin-right: 20rpx; |
||||
|
.label__text { |
||||
|
font-size: 28rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
.value { |
||||
|
flex-grow: 1; |
||||
|
flex-shrink: 1; |
||||
|
text-align: right; |
||||
|
} |
||||
|
} |
||||
|
.qn-form-item__title { |
||||
|
background-color: #f7f8fa; |
||||
|
padding: 20rpx 32rpx; |
||||
|
border: none; |
||||
|
.title { |
||||
|
font-size: 30rpx; |
||||
|
color: #888888; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,157 +1,182 @@ |
|||||
{ |
{ |
||||
"pages": [ |
|
||||
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages |
|
||||
|
|
||||
{ |
|
||||
"path": "pages/client/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "客户", |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/client-list/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "客户列表", |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/search/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "客户搜索", |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/add-user/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "添加客户", |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/trade/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "交易", |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/mall/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "商城" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/mine/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "我的" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/login/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "登录", |
|
||||
"enablePullDownRefresh": false, |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/agreement/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "用户与隐私协议" |
|
||||
} |
|
||||
}, |
|
||||
{ |
|
||||
"path": "pages/client-detail/index", |
|
||||
"style": { |
|
||||
"navigationBarTitleText": "客户详情", |
|
||||
"navigationStyle": "custom" |
|
||||
} |
|
||||
} |
|
||||
,{ |
|
||||
"path" : "components/not-logged/not-logged", |
|
||||
"style" : |
|
||||
{ |
|
||||
"navigationBarTitleText": "", |
|
||||
"enablePullDownRefresh": false |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
,{ |
|
||||
"path" : "pages/trade/quotationList", |
|
||||
"style" : |
|
||||
{ |
|
||||
"navigationBarTitleText": "", |
|
||||
"enablePullDownRefresh": false |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
,{ |
|
||||
"path" : "pages/trade/orderList", |
|
||||
"style" : |
|
||||
{ |
|
||||
"navigationBarTitleText": "", |
|
||||
"enablePullDownRefresh": false |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
,{ |
|
||||
"path" : "pages/trade/my-offer", |
|
||||
"style" : |
|
||||
{ |
|
||||
"navigationBarTitleText": "我的报价", |
|
||||
"enablePullDownRefresh": false |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
], |
|
||||
"globalStyle": { |
|
||||
"navigationBarTextStyle": "black", |
|
||||
"navigationBarTitleText": "uni-app", |
|
||||
"navigationBarBackgroundColor": "#F8F8F8", |
|
||||
"backgroundColor": "#F8F8F8", |
|
||||
"backgroundColorTop": "#FFFFFF" |
|
||||
}, |
|
||||
"tabBar": { |
|
||||
"color": "#888", |
|
||||
"selectedColor": "#007AFF", |
|
||||
"borderStyle": "white", |
|
||||
"backgroundColor": "#f9f9f9", |
|
||||
"list": [{ |
|
||||
"pagePath": "pages/client/index", |
|
||||
"iconPath": "static/imgs/tabbar/client-gray.png", |
|
||||
"selectedIconPath": "static/imgs/tabbar/client-blue.png", |
|
||||
"text": "客户" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "pages/trade/index", |
|
||||
"iconPath": "static/imgs/tabbar/trade-gray.png", |
|
||||
"selectedIconPath": "static/imgs/tabbar/trade-blue.png", |
|
||||
"text": "交易" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "pages/mall/index", |
|
||||
"iconPath": "static/imgs/tabbar/mall-gray.png", |
|
||||
"selectedIconPath": "static/imgs/tabbar/mall-blue.png", |
|
||||
"text": "纸商城" |
|
||||
}, |
|
||||
{ |
|
||||
"pagePath": "pages/mine/index", |
|
||||
"iconPath": "static/imgs/tabbar/mine-gray.png", |
|
||||
"selectedIconPath": "static/imgs/tabbar/mine-blue.png", |
|
||||
"text": "我的" |
|
||||
} |
|
||||
] |
|
||||
}, |
|
||||
"condition": { |
|
||||
//模式配置,仅开发期间生效 |
|
||||
"current": 0, //当前激活的模式(list 的索引项) |
|
||||
"list": [{ |
|
||||
"name": "", //模式名称 |
|
||||
"path": "", //启动页面,必选 |
|
||||
"query": "" //启动参数,在页面的onLoad函数里面得到 |
|
||||
}] |
|
||||
} |
|
||||
|
"pages": [ |
||||
|
{ |
||||
|
"path": "pages/client/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户", |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/client-list/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户列表", |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/search/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户搜索", |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/add-user/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "添加客户", |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/trade/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "交易", |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/mall/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "商城" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/mine/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "我的" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/login/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "登录", |
||||
|
"enablePullDownRefresh": false, |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/agreement/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "用户与隐私协议" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/client-detail/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户详情", |
||||
|
"navigationStyle": "custom" |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/client-credit/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户授信", |
||||
|
"navigationStyle": "custom", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/client-signing/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户签约", |
||||
|
"navigationStyle": "custom", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/client-credit-limit/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "授信额度", |
||||
|
"navigationStyle": "custom", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/client-credit-list/index", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "客户授信列表", |
||||
|
"navigationStyle": "custom", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "components/not-logged/not-logged", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/trade/quotationList", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/trade/orderList", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
}, |
||||
|
{ |
||||
|
"path": "pages/trade/my-offer", |
||||
|
"style": { |
||||
|
"navigationBarTitleText": "我的报价", |
||||
|
"enablePullDownRefresh": false |
||||
|
} |
||||
|
} |
||||
|
], |
||||
|
"globalStyle": { |
||||
|
"navigationBarTextStyle": "black", |
||||
|
"navigationBarTitleText": "uni-app", |
||||
|
"navigationBarBackgroundColor": "#F8F8F8", |
||||
|
"backgroundColor": "#F8F8F8", |
||||
|
"backgroundColorTop": "#FFFFFF" |
||||
|
}, |
||||
|
"tabBar": { |
||||
|
"color": "#888", |
||||
|
"selectedColor": "#007AFF", |
||||
|
"borderStyle": "white", |
||||
|
"backgroundColor": "#f9f9f9", |
||||
|
"list": [ |
||||
|
{ |
||||
|
"pagePath": "pages/client/index", |
||||
|
"iconPath": "static/imgs/tabbar/client-gray.png", |
||||
|
"selectedIconPath": "static/imgs/tabbar/client-blue.png", |
||||
|
"text": "客户" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "pages/trade/index", |
||||
|
"iconPath": "static/imgs/tabbar/trade-gray.png", |
||||
|
"selectedIconPath": "static/imgs/tabbar/trade-blue.png", |
||||
|
"text": "交易" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "pages/mall/index", |
||||
|
"iconPath": "static/imgs/tabbar/mall-gray.png", |
||||
|
"selectedIconPath": "static/imgs/tabbar/mall-blue.png", |
||||
|
"text": "纸商城" |
||||
|
}, |
||||
|
{ |
||||
|
"pagePath": "pages/mine/index", |
||||
|
"iconPath": "static/imgs/tabbar/mine-gray.png", |
||||
|
"selectedIconPath": "static/imgs/tabbar/mine-blue.png", |
||||
|
"text": "我的" |
||||
|
} |
||||
|
] |
||||
|
}, |
||||
|
"condition": { |
||||
|
//模式配置,仅开发期间生效 |
||||
|
"current": 0, //当前激活的模式(list 的索引项) |
||||
|
"list": [ |
||||
|
{ |
||||
|
"name": "", //模式名称 |
||||
|
"path": "", //启动页面,必选 |
||||
|
"query": "" //启动参数,在页面的onLoad函数里面得到 |
||||
|
} |
||||
|
] |
||||
|
} |
||||
} |
} |
||||
@ -0,0 +1,267 @@ |
|||||
|
<template> |
||||
|
<view> |
||||
|
<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="客户授信"></uni-nav-bar> |
||||
|
<qn-form :columns="columns"> |
||||
|
<view slot="name"> |
||||
|
<qn-easyinput :maxlength="20" @blur="showCompany" v-model="form.name" :inputBorder="false" text="right" placeholder="请选择授信的客户"></qn-easyinput> |
||||
|
</view> |
||||
|
<view slot="supplierName"> |
||||
|
<qn-data-picker |
||||
|
v-model="form.supplierId" |
||||
|
text="right" |
||||
|
:border="false" |
||||
|
placeholder="请选择账号下的盘商" |
||||
|
popup-title="请选择盘商" |
||||
|
:map="{ text: 'name', value: 'id' }" |
||||
|
@change="onSupplierChange" |
||||
|
:clear-icon="false" |
||||
|
:localdata="supplierList" |
||||
|
></qn-data-picker> |
||||
|
</view> |
||||
|
</qn-form> |
||||
|
<view class="card_area"> |
||||
|
<view class="card_area-item" :class="{ selected: form.creditType == 'month' }" @click="selectCreditType('month')"> |
||||
|
<image class="selected-icon" v-if="form.creditType == 'month'" src="/static/imgs/client-credit/selected-icon.png"></image> |
||||
|
<image class="card_area-item-icon" src="/static/imgs/client-credit/month-credit-icon.png"></image> |
||||
|
<text class="card_area-item-text">月结授信</text> |
||||
|
</view> |
||||
|
<view class="card_area-item" :class="{ selected: form.creditType == 'fs' }" @click="selectCreditType('fs')"> |
||||
|
<image class="selected-icon" v-if="form.creditType == 'fs'" src="/static/imgs/client-credit/selected-icon.png"></image> |
||||
|
<image class="card_area-item-icon" src="/static/imgs/client-credit/fs-credit-icon.png"></image> |
||||
|
<text class="card_area-item-text">飞算授信</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<uni-popup ref="popup" type="bottom"> |
||||
|
<view class="popup_modal"> |
||||
|
<slot name="title"> |
||||
|
<view class="popup_modal-title">请选择以下公司</view> |
||||
|
</slot> |
||||
|
<scroll-view scroll-y="true" class="popup_modal-scroll"> |
||||
|
<view |
||||
|
@click="selectCompany(item.enterpriseId, item.enterpriseName)" |
||||
|
class="popup_modal-scroll-item" |
||||
|
v-for="item in searchList" |
||||
|
:key="item.enterpriseId" |
||||
|
> |
||||
|
{{ item.enterpriseName }} |
||||
|
</view> |
||||
|
</scroll-view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
<qn-footer fixed height="120rpx"> |
||||
|
<view class="button_area"> |
||||
|
<view :class="{ button__submit: true, 'button__submit--disabled': !canSubmit }" @click="canSubmit && next()"> |
||||
|
<text class="text">下一步</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
</qn-footer> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { back, go2 } from '@/utils/hook.js' |
||||
|
import qnForm from '@/components/qn-form/qn-form.vue' |
||||
|
import qnDataPicker from '@/components/qn-data-picker/qn-data-picker.vue' |
||||
|
import { getCompanyList } from '@/apis/clientCreditApi.js' |
||||
|
import { getBaseInfo } from '@/apis/commonApi.js' |
||||
|
const columns = [ |
||||
|
{ |
||||
|
key: 1, |
||||
|
type: 'title', |
||||
|
label: '授信客户' |
||||
|
}, |
||||
|
{ |
||||
|
key: 'name', |
||||
|
type: 'item', |
||||
|
label: '选择客户', |
||||
|
required: true |
||||
|
}, |
||||
|
{ |
||||
|
key: 'supplierName', |
||||
|
type: 'item', |
||||
|
label: '选择账号盘商', |
||||
|
required: true |
||||
|
}, |
||||
|
{ |
||||
|
key: 2, |
||||
|
type: 'title', |
||||
|
label: '选择授信方式' |
||||
|
} |
||||
|
] |
||||
|
export default { |
||||
|
components: { |
||||
|
qnForm, |
||||
|
qnDataPicker |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
columns: Object.freeze(columns), |
||||
|
form: { |
||||
|
name: null, |
||||
|
creditType: null, |
||||
|
supplierId: this.$store.state.supplierInfo.id |
||||
|
}, |
||||
|
searchList: [], |
||||
|
supplierList: [] |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
back, |
||||
|
showCompany(e) { |
||||
|
let enterpriseName = e.detail.value.trim() |
||||
|
if (enterpriseName) { |
||||
|
getCompanyList({ enterpriseName }).then((res) => { |
||||
|
if (res) { |
||||
|
this.searchList = res.records |
||||
|
if (this.searchList.length > 0) { |
||||
|
this.$refs.popup.open('bottom') |
||||
|
} |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
selectCompany(enterpriseId, enterpriseName) { |
||||
|
this.$refs.popup.close() |
||||
|
this.form.name = enterpriseName |
||||
|
this.form.id = enterpriseId |
||||
|
}, |
||||
|
next() { |
||||
|
go2('client-signing', { |
||||
|
...this.form |
||||
|
}) |
||||
|
}, |
||||
|
selectCreditType(creditType) { |
||||
|
console.log(creditType) |
||||
|
this.form.creditType = creditType |
||||
|
}, |
||||
|
onSupplierChange(e) { |
||||
|
console.log('e', e) |
||||
|
} |
||||
|
}, |
||||
|
created() { |
||||
|
getBaseInfo().then((res) => { |
||||
|
if (res) { |
||||
|
this.supplierList = res.supplierList.map((item) => ({ |
||||
|
id: item.id, |
||||
|
name: item.name |
||||
|
})) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
computed: { |
||||
|
canSubmit() { |
||||
|
return this.form.id != null && this.form.creditType != null |
||||
|
} |
||||
|
}, |
||||
|
watch: { |
||||
|
['form.name']() { |
||||
|
if (this.form.id) { |
||||
|
this.form.id = null |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
.popup_modal { |
||||
|
width: 750rpx; |
||||
|
height: 600rpx; |
||||
|
background-color: #fff; |
||||
|
border-radius: 10px 10px 0 0; |
||||
|
.popup_modal-title { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 750rpx; |
||||
|
height: 88rpx; |
||||
|
font-weight: 600; |
||||
|
border-bottom: 2rpx solid #d8d8d8; |
||||
|
} |
||||
|
.popup_modal-scroll { |
||||
|
width: 750rpx; |
||||
|
height: 600rpx; |
||||
|
.popup_modal-scroll-item { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: flex-start; |
||||
|
width: 750rpx; |
||||
|
height: 88rpx; |
||||
|
padding: 0rpx 32rpx; |
||||
|
border-bottom: 2rpx solid #d8d8d8; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.button_area { |
||||
|
width: 750rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 0 32rpx; |
||||
|
.button__submit { |
||||
|
flex-grow: 1; |
||||
|
height: 88rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
background: #007aff; |
||||
|
border-radius: 10rpx; |
||||
|
.text { |
||||
|
font-size: 30rpx; |
||||
|
color: #ffffff; |
||||
|
} |
||||
|
} |
||||
|
.button__submit--disabled { |
||||
|
opacity: 0.5; |
||||
|
} |
||||
|
} |
||||
|
.card_area { |
||||
|
width: 750rpx; |
||||
|
height: 350rpx; |
||||
|
background-color: #fff; |
||||
|
padding: 100rpx 32rpx; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
.card_area-item { |
||||
|
position: relative; |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
width: 331rpx; |
||||
|
height: 150rpx; |
||||
|
background: #ffffff; |
||||
|
border: 3rpx solid #d8d8d8; |
||||
|
border-radius: 10rpx; |
||||
|
.selected-icon { |
||||
|
width: 40rpx; |
||||
|
height: 40rpx; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
.card_area-item-icon { |
||||
|
width: 48rpx; |
||||
|
height: 48rpx; |
||||
|
margin-right: 20rpx; |
||||
|
flex-grow: 0; |
||||
|
flex-shrink: 0; |
||||
|
} |
||||
|
.card_area-item-text { |
||||
|
font-size: 36rpx; |
||||
|
color: #000000; |
||||
|
letter-spacing: 2rpx; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
.selected { |
||||
|
border: 3rpx solid #007aff; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Write
Preview
Loading…
Cancel
Save