11 changed files with 772 additions and 704 deletions
@ -1,147 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'; |
|
||||
import { ref, reactive, toRefs, nextTick, onMounted } from 'vue' |
|
||||
|
|
||||
type argument = { |
|
||||
customListType?: 'default' | 'custom' | 'scroll' |
|
||||
isPerformSearch?: boolean |
|
||||
isPullDownRefresh?: boolean |
|
||||
onFormSearch: (formData: any, onSuccess: Function) => void |
|
||||
onRender?: Function |
|
||||
options?: { [n: string]: string | number | boolean } |
|
||||
emptyText?: string |
|
||||
emptyHeight?: number |
|
||||
} |
|
||||
|
|
||||
const props = withDefaults(defineProps<argument>(), { |
|
||||
customListType: 'default', |
|
||||
isPerformSearch: true, |
|
||||
isPullDownRefresh: true, |
|
||||
onFormSearch: () => { |
|
||||
console.log('onFormSearch') |
|
||||
}, |
|
||||
onRender: () => { |
|
||||
console.log('onRender') |
|
||||
}, |
|
||||
options: () => { |
|
||||
return {} |
|
||||
}, |
|
||||
emptyText: '暂无数据~', |
|
||||
emptyHeight: 60 |
|
||||
}) |
|
||||
|
|
||||
let { options, isPerformSearch, isPullDownRefresh, onFormSearch, onRender } = toRefs(props) |
|
||||
|
|
||||
const list = ref<any[]>([]) |
|
||||
const status = ref('loading') |
|
||||
const initing = ref(true) |
|
||||
const loading = ref(true) |
|
||||
const query = reactive({ |
|
||||
page: 1, |
|
||||
limit: 10, |
|
||||
total: 0 |
|
||||
}) |
|
||||
|
|
||||
const loadData = (callback?: Function) => { |
|
||||
uni.showLoading({ title: '数据加载中' }) |
|
||||
loading.value = true |
|
||||
const params = { ...query, ...options.value } as { [n: string]: string | number | boolean } |
|
||||
delete params.total |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
onFormSearch.value(params, ({ data }: { data: { data: any; total: number } }) => { |
|
||||
loading.value = false |
|
||||
initing.value = false |
|
||||
callback && callback() |
|
||||
query.page = params.page as number |
|
||||
query.limit = params.limit as number |
|
||||
query.total = data.total || 0 |
|
||||
list.value = [...list.value, ...data.data] |
|
||||
|
|
||||
status.value = query.page * query.limit >= query.total ? 'nomore' : 'loading' |
|
||||
|
|
||||
onRender.value && onRender.value(data) |
|
||||
|
|
||||
uni.hideLoading() |
|
||||
}) |
|
||||
}, 100) |
|
||||
} |
|
||||
|
|
||||
const refreshFn = (callback?: Function) => { |
|
||||
query.page = 1 |
|
||||
query.total = 0 |
|
||||
list.value = [] |
|
||||
initing.value = true |
|
||||
loadData(callback) |
|
||||
} |
|
||||
|
|
||||
const onScrolltolower = () => { |
|
||||
if (query.page * query.limit >= query.total) { |
|
||||
status.value = 'nomore' |
|
||||
} else { |
|
||||
if (loading.value) return |
|
||||
|
|
||||
setTimeout(() => { |
|
||||
status.value = 'loading' |
|
||||
query.page += 1 |
|
||||
loadData() |
|
||||
}, 1000) |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
onMounted(() => { |
|
||||
if (isPerformSearch.value) { |
|
||||
nextTick(() => { |
|
||||
refreshFn() |
|
||||
}) |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
onPullDownRefresh(() => { |
|
||||
if (isPullDownRefresh.value) refreshFn(() => uni.stopPullDownRefresh()) |
|
||||
}) |
|
||||
|
|
||||
onReachBottom(() => { |
|
||||
if (props.customListType !== 'scroll') { |
|
||||
onScrolltolower() |
|
||||
} |
|
||||
}) |
|
||||
|
|
||||
defineExpose({ |
|
||||
list, |
|
||||
refreshFn |
|
||||
}) |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<view v-if="!initing"> |
|
||||
<block v-if="list.length > 0"> |
|
||||
<template v-if="customListType === 'custom'"> |
|
||||
<slot v-bind:data="list" /> |
|
||||
<u-loadmore :status="status" /> |
|
||||
</template> |
|
||||
<template v-else-if="customListType === 'scroll'"> |
|
||||
<scroll-view class="scroll-view" scroll-y @scrolltolower="onScrolltolower"> |
|
||||
<view v-for="(item, index) in list" :key="index"> |
|
||||
<slot v-bind:row="item" v-bind:index="index" /> |
|
||||
</view> |
|
||||
<u-loadmore :status="status" /> |
|
||||
</scroll-view> |
|
||||
</template> |
|
||||
<template v-else> |
|
||||
<view v-for="(item, index) in list" :key="index"> |
|
||||
<slot v-bind:row="item" v-bind:index="index" /> |
|
||||
</view> |
|
||||
<u-loadmore :status="status" /> |
|
||||
</template> |
|
||||
</block> |
|
||||
<ex-empty v-show="list.length <= 0 && status === 'nomore'" :height="emptyHeight" :tips="emptyText" /> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<style lang="scss" scoped> |
|
||||
.scroll-view { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,162 @@ |
|||||
|
<script setup lang="ts"></script> |
||||
|
|
||||
|
<template> |
||||
|
<view class="electionList-info"> |
||||
|
<view class="head"> |
||||
|
<view class="title">2024年度业主委员会主任选举</view> |
||||
|
<view class="status"> |
||||
|
<text style="color: #4b5563; margin-right: 16rpx">已结束</text> |
||||
|
<text style="color: #6b7280">2024-01-15 10:00 ~ 2024-01-16 10:00</text> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="countview flex-center-between"> |
||||
|
<view class="flex column items"> |
||||
|
<u-count-to :startVal="0" :endVal="20" bold fontSize="48rpx" color="#2563EB" /> |
||||
|
<view class="tip">参选人数</view> |
||||
|
</view> |
||||
|
<view class="flex column items"> |
||||
|
<u-count-to :startVal="0" :endVal="20" bold fontSize="48rpx" color="#2563EB" /> |
||||
|
<view class="tip">候选人数</view> |
||||
|
</view> |
||||
|
<view class="flex column items"> |
||||
|
<u-count-to :startVal="0" :endVal="20" bold fontSize="48rpx" color="#2563EB" /> |
||||
|
<view class="tip">当选人数</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="content" v-for="(v, k) of 4" :key="k"> |
||||
|
<view class="flex"> |
||||
|
<view class="headimg"></view> |
||||
|
<view class="name">陈志明</view> |
||||
|
<view class="status">当选</view> |
||||
|
<!-- <view class="status un">未当选</view> --> |
||||
|
</view> |
||||
|
<view class="progress"> |
||||
|
<view class="flex-center-between progress-text"> |
||||
|
<text>同意</text> |
||||
|
<text class="b">98 票(62.8%)</text> |
||||
|
</view> |
||||
|
<u-line-progress :percentage="62.8" height="8rpx" active-color="#2563EB" :show-text="false" /> |
||||
|
</view> |
||||
|
<view class="progress"> |
||||
|
<view class="flex-center-between progress-text"> |
||||
|
<text>反对</text> |
||||
|
<text class="e">35 票 (22.4%)</text> |
||||
|
</view> |
||||
|
<u-line-progress :percentage="22.4" height="8rpx" active-color="#ef4444" :show-text="false" /> |
||||
|
</view> |
||||
|
<view class="progress"> |
||||
|
<view class="flex-center-between progress-text"> |
||||
|
<text>弃权</text> |
||||
|
<text class="f">23 票 (14.8%)</text> |
||||
|
</view> |
||||
|
<u-line-progress :percentage="14.8" height="8rpx" active-color="#9CA3AF" :show-text="false" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.electionList-info { |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
padding: 32rpx; |
||||
|
box-sizing: border-box; |
||||
|
background-color: #f9fafb; |
||||
|
|
||||
|
.head { |
||||
|
margin-bottom: 48rpx; |
||||
|
|
||||
|
.title { |
||||
|
font-size: 40rpx; |
||||
|
font-weight: bold; |
||||
|
line-height: 56rpx; |
||||
|
color: #000000; |
||||
|
text-align: left; |
||||
|
margin-bottom: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: 40rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.countview { |
||||
|
padding: 32rpx 60rpx; |
||||
|
border-radius: 24rpx; |
||||
|
margin-bottom: 32rpx; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.tip { |
||||
|
color: #4b5563; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
padding: 32rpx; |
||||
|
border-radius: 24rpx; |
||||
|
margin-bottom: 32rpx; |
||||
|
background-color: #fff; |
||||
|
|
||||
|
.headimg { |
||||
|
width: 128rpx; |
||||
|
height: 128rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
background-color: #4b556377; |
||||
|
margin-right: 22rpx; |
||||
|
} |
||||
|
|
||||
|
.name { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 56rpx; |
||||
|
color: #000000; |
||||
|
margin-right: auto; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
width: 136rpx; |
||||
|
text-align: center; |
||||
|
font-size: 36rpx; |
||||
|
font-weight: normal; |
||||
|
border-radius: 999rpx; |
||||
|
padding: 16rpx 0; |
||||
|
line-height: 40rpx; |
||||
|
color: #2563eb; |
||||
|
background: rgba(37, 99, 235, 0.1); |
||||
|
|
||||
|
&.un { |
||||
|
color: #f44336; |
||||
|
background: rgba(244, 67, 54, 0.1); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.progress { |
||||
|
margin-top: 24rpx; |
||||
|
height: min-content; |
||||
|
|
||||
|
&-text { |
||||
|
color: #000; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
margin-bottom: 8rpx; |
||||
|
|
||||
|
.b { |
||||
|
color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
.f { |
||||
|
color: #6b7280; |
||||
|
} |
||||
|
|
||||
|
.e { |
||||
|
color: #ef4444; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,7 +1,200 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params }); |
||||
|
const doSearch = (_formData: { page: number; limit: number }, onSuccess: Function) => { |
||||
|
onSuccess({ |
||||
|
data: { |
||||
|
data: [{ name: "测试一" }, { name: "测试二" }], |
||||
|
total: 4, |
||||
|
}, |
||||
|
}); |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
<template> |
<template> |
||||
<view>选举结果</view> |
<view class="electionList"> |
||||
|
<ex-list ref="reListRef" custom-list-type="scroll" :on-form-search="doSearch"> |
||||
|
<template v-slot="{ row, index }"> |
||||
|
<view class="items" :uid="'items' + index"> |
||||
|
<view class="flex"> |
||||
|
<view class="flex1"> |
||||
|
<view class="flex-center-start"> |
||||
|
<text class="text-ellipsis title">{{ "2024年度学生会主席选举" }}</text> |
||||
|
<!-- <text class="status b">进行中</text> --> |
||||
|
<!-- <text class="status f">未开始</text> --> |
||||
|
<text class="status e">已结束</text> |
||||
|
</view> |
||||
|
<view class="time">{{ "投票时间：2024-03-01 至 2024-03-07" }}</view> |
||||
|
</view> |
||||
|
<view :class="{ arrow: true, active: row.showInfo }" @click="row.showInfo = !row.showInfo"> |
||||
|
<u-icon name="arrow-down" color="#9CA3AF" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="info" v-if="row.showInfo"> |
||||
|
<view class="flex info-items" v-for="(v, k) of 2" :key="k"> |
||||
|
<view class="head"></view> |
||||
|
<view class="content flex1"> |
||||
|
<view class="name flex-center-start"> |
||||
|
<text>陈佳怡</text> |
||||
|
<!-- <text class="status">当选</text> --> |
||||
|
<text class="status un">未当选</text> |
||||
|
</view> |
||||
|
<view class="votes">得票数：286</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="progress"> |
||||
|
<u-line-progress :percentage="60" height="8rpx" active-color="#2563EB" :show-text="false" /> |
||||
|
<view class="progress-text">60%</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="info-bts" @click.stop="navto('pages/electionList/info')">查看投票详情</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
</ex-list> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup></script> |
<style scoped lang="scss"> |
||||
|
.electionList { |
||||
|
width: 100%; |
||||
|
min-height: 100vh; |
||||
|
box-sizing: border-box; |
||||
|
padding: 32rpx; |
||||
|
background-color: #f9fafb; |
||||
|
|
||||
|
.items { |
||||
|
padding: 32rpx; |
||||
|
border-radius: 12px; |
||||
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #ffffff; |
||||
|
box-sizing: border-box; |
||||
|
border: 1px solid #f3f4f6; |
||||
|
box-shadow: |
||||
|
0px 1px 2px -1px rgba(0, 0, 0, 0.1), |
||||
|
0px 1px 3px 0px rgba(0, 0, 0, 0.1); |
||||
|
margin-bottom: 32rpx; |
||||
|
|
||||
|
.text-ellipsis { |
||||
|
overflow: hidden; |
||||
|
white-space: noraml; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
color: #000; |
||||
|
font-size: 32rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 48rpx; |
||||
|
} |
||||
|
|
||||
|
.status { |
||||
|
font-size: 24rpx; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 0 16rpx; |
||||
|
margin-left: 16rpx; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
&.b { |
||||
|
color: #fff; |
||||
|
background-color: #2563eb; |
||||
|
} |
||||
|
|
||||
|
&.f { |
||||
|
color: #6b7280; |
||||
|
background-color: #e5e7eb; |
||||
|
} |
||||
|
|
||||
|
&.e { |
||||
|
color: #fff; |
||||
|
background-color: #ef4444; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.time { |
||||
|
padding-top: 8rpx; |
||||
|
color: #6b7280; |
||||
|
line-height: 40rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.arrow { |
||||
|
transition: 0.3s all ease-in; |
||||
|
|
||||
|
&.active { |
||||
|
transform: rotateZ(180deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info { |
||||
|
&-items { |
||||
|
margin-top: 32rpx; |
||||
|
|
||||
|
.head { |
||||
|
width: 96rpx; |
||||
|
height: 96rpx; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
background-color: #6b7280; |
||||
|
margin-right: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.content { |
||||
|
height: min-content; |
||||
|
|
||||
|
.name { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 500; |
||||
|
line-height: 40rpx; |
||||
|
color: #000000; |
||||
|
|
||||
|
.status { |
||||
|
font-size: 20rpx; |
||||
|
font-weight: normal; |
||||
|
border-radius: 999rpx; |
||||
|
padding: 8rpx 24rpx; |
||||
|
line-height: 20rpx; |
||||
|
color: #2563eb; |
||||
|
background: rgba(37, 99, 235, 0.1); |
||||
|
|
||||
|
&.un { |
||||
|
color: #f44336; |
||||
|
background: rgba(244, 67, 54, 0.1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.votes { |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
color: #6b7280; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.progress { |
||||
|
width: 192rpx; |
||||
|
height: min-content; |
||||
|
|
||||
|
&-text { |
||||
|
padding-top: 8rpx; |
||||
|
color: #6b7280; |
||||
|
font-size: 24rpx; |
||||
|
line-height: 32rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
<style lang="scss" scoped></style> |
&-bts { |
||||
|
padding: 16rpx; |
||||
|
margin: 48rpx 0 24rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: 42rpx; |
||||
|
text-align: center; |
||||
|
color: #ffffff; |
||||
|
background-color: #2563eb; |
||||
|
border-radius: 8rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|||||
@ -1,112 +0,0 @@ |
|||||
<script setup lang="ts"> |
|
||||
import useUserStore from '@/store/user' |
|
||||
const userStore = useUserStore() |
|
||||
|
|
||||
const phone = ref('') |
|
||||
const kefuRef = ref() |
|
||||
const list = ref< |
|
||||
{ |
|
||||
id?: number |
|
||||
name?: string |
|
||||
guide: { guide_id?: number; title?: string }[] |
|
||||
}[] |
|
||||
>([]) |
|
||||
|
|
||||
const kefuConfirm = () => { |
|
||||
uni.makePhoneCall({ |
|
||||
phoneNumber: phone.value, |
|
||||
success: (response) => { |
|
||||
console.log('success', response) |
|
||||
}, |
|
||||
fail: (err) => { |
|
||||
console.log('fail', err) |
|
||||
} |
|
||||
}) |
|
||||
} |
|
||||
|
|
||||
const navto = (url: string, params = {}) => uni.$util.goToPage({ url, params }) |
|
||||
|
|
||||
onShow(() => { |
|
||||
// getKeySetting('service_telephone').then(({ data: { value } }: any) => (phone.value = value.trim())) |
|
||||
// listApi().then(({ data }: any) => (list.value = data || [])) |
|
||||
}) |
|
||||
</script> |
|
||||
<template> |
|
||||
<ex-header title="用户指南" /> |
|
||||
<view class="guide-view"> |
|
||||
<view class="kefu-btn flex" @click="kefuRef.show = true"> |
|
||||
<image src="http://cdn-pos.lingji.vip/static/icon/customer.png" mode="widthFix" style="width: 40rpx" /> |
|
||||
<text style="margin-left: 14rpx">联系客服</text> |
|
||||
</view> |
|
||||
|
|
||||
<view class="pages-view"> |
|
||||
<u-collapse accordion :border="true"> |
|
||||
<block v-for="(v, k) of list" :key="k"> |
|
||||
<u-collapse-item :title="v.name"> |
|
||||
<view |
|
||||
:key="ck" |
|
||||
v-for="(cv, ck) of v.guide" |
|
||||
:class="{ 'pages-view-content': true, 'text-ellipsis': true, border: ck < v.guide.length - 1 }" |
|
||||
@click.stop="navto('pages/setting/agreement', { type: 'guide', id: cv.guide_id })" |
|
||||
> |
|
||||
{{ cv.title }} |
|
||||
</view> |
|
||||
</u-collapse-item> |
|
||||
</block> |
|
||||
</u-collapse> |
|
||||
</view> |
|
||||
|
|
||||
<ex-dialog ref="kefuRef" title="联系客服" show-cancel-button confirm-text="拨号" confirm-color="#43CF7C" @confirm="kefuConfirm"> |
|
||||
<view class="flex column"> |
|
||||
<image style="width: 84rpx" :src="`http://cdn-pos.lingji.vip/static/icon/phone-${userStore.useType}.png`" mode="widthFix" /> |
|
||||
<view style="margin-top: 36rpx; font-size: 60rpx; font-weight: 700; color: #383838; text-align: center"> |
|
||||
{{ phone }} |
|
||||
</view> |
|
||||
</view> |
|
||||
</ex-dialog> |
|
||||
</view> |
|
||||
</template> |
|
||||
|
|
||||
<style scoped lang="scss"> |
|
||||
.guide-view { |
|
||||
padding: 26rpx 28rpx; |
|
||||
.kefu-btn { |
|
||||
color: #fff; |
|
||||
padding: 32rpx; |
|
||||
margin-bottom: 26rpx; |
|
||||
background: linear-gradient(90deg, #4778ff 0%, #4778ffb8 100%); |
|
||||
} |
|
||||
.pages-view { |
|
||||
background-color: #fff; |
|
||||
|
|
||||
&-content { |
|
||||
padding: 16rpx; |
|
||||
color: #9a9bad; |
|
||||
text-align: left; |
|
||||
font-size: 28rpx; |
|
||||
font-weight: 400; |
|
||||
letter-spacing: 0; |
|
||||
line-height: 48rpx; |
|
||||
|
|
||||
&.border { |
|
||||
border-bottom: 1rpx solid #dbdbdb; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
:deep(.u-collapse) { |
|
||||
.u-cell__body { |
|
||||
padding: 24rpx 28rpx; |
|
||||
} |
|
||||
|
|
||||
.u-collapse-item__content__text { |
|
||||
padding: 0 28rpx; |
|
||||
border-bottom: 4rpx solid #f5f5f5 !important; |
|
||||
|
|
||||
&.content-class { |
|
||||
border: none !important; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</style> |
|
||||
@ -0,0 +1,107 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
// import useUserStore from "@/store/user"; |
||||
|
// const userStore = useUserStore(); |
||||
|
</script> |
||||
|
<template> |
||||
|
<view class="userview"> |
||||
|
<view class="userview-info box"> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">姓名</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">电话</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">性别</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">民族</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">年龄</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">工作单位</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="flex-center-between userview-info-item"> |
||||
|
<view class="userview-info-item-label">职位</view> |
||||
|
<view class="userview-info-item-content flex"> |
||||
|
<input placeholder="请输入" style="text-align: right" /> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="bts">确认信息</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.userview { |
||||
|
width: 100%; |
||||
|
padding: 32rpx; |
||||
|
min-height: calc(100vh - 94px); |
||||
|
box-sizing: border-box; |
||||
|
background-color: #f9fafb; |
||||
|
|
||||
|
.box { |
||||
|
margin-bottom: 60rpx; |
||||
|
border-radius: 24rpx; |
||||
|
background-color: #ffffff; |
||||
|
box-shadow: 0 2rpx 4rpx 0 rgba(0, 0, 0, 0.05); |
||||
|
} |
||||
|
|
||||
|
&-info { |
||||
|
font-size: 28rpx; |
||||
|
font-weight: normal; |
||||
|
line-height: 40rpx; |
||||
|
padding: 0 32rpx 32rpx; |
||||
|
border: 1rpx solid #fff; |
||||
|
|
||||
|
&-item { |
||||
|
padding: 60rpx 0 24rpx; |
||||
|
border-top: 1rpx solid #e5e7eb; |
||||
|
|
||||
|
&:first-child { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
&-label { |
||||
|
color: #4b5563; |
||||
|
} |
||||
|
|
||||
|
&-content { |
||||
|
color: #1f2937; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bts { |
||||
|
color: #fff; |
||||
|
font-size: 28rpx; |
||||
|
line-height: 40rpx; |
||||
|
text-align: center; |
||||
|
border-radius: 8rpx; |
||||
|
padding: 24rpx 80rpx; |
||||
|
letter-spacing: 4rpx; |
||||
|
border: 1rpx solid #2563eb; |
||||
|
background-color: #2563eb; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue