小程序产品库完成
This commit is contained in:
352
src/mods/AppJob/AppJob.vue
Normal file
352
src/mods/AppJob/AppJob.vue
Normal file
@@ -0,0 +1,352 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="search-wrap">
|
||||
<div class="left" @click="show=true">
|
||||
<span>{{ search.typeName ? search.typeName : "全部" }}</span>
|
||||
<u-icon name="arrow-down" color="#ffffff" size="20"></u-icon>
|
||||
</div>
|
||||
<div class="right">
|
||||
<u-icon name="search" size="32" color="rgba(255,255,255,0.5)" :custom-style="{marginRight:'8px'}"></u-icon>
|
||||
<input placeholder="请输入需要搜索的内容" style="flex: 1;color:#fff;" confirm-type="search"
|
||||
placeholder-style="color:rgba(255,255,255,0.5)" v-model="search.title"
|
||||
@confirm="current=1;getList()"></input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="job-list" v-if="list.length">
|
||||
<header>
|
||||
<span>招工就业列表</span>
|
||||
<div class="right">
|
||||
共<em>{{ total }}</em>个职位
|
||||
</div>
|
||||
</header>
|
||||
<div class="card" v-for="(item,index) in list" :key="index">
|
||||
<template v-if="item.type == 1">
|
||||
<div class="top" @click="toDetail(0,item)">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="job-content">{{ item.remark || "" }}</div>
|
||||
<div class="photo">
|
||||
<img
|
||||
:src="photo.url"
|
||||
alt="" v-for="photo in item.files" :key="photo.id">
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="tag">个人求职</div>
|
||||
<div class="date">{{ item.createTime && item.createTime.slice(0, 16) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<span class="name">{{ item.linkName }}</span>
|
||||
<div class="right" @click="phone(item)">
|
||||
<u-icon name="phone-fill" size="36" color="#4181FF" :custom-style="{marginRight:'8px'}"></u-icon>
|
||||
{{ item.linkPhone }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.type == 0">
|
||||
<div class="top" @click="toDetail(1,item)">
|
||||
<div class="post-info">
|
||||
<div class="post">{{ item.title }}</div>
|
||||
<div class="salary">{{ item.salary }}</div>
|
||||
</div>
|
||||
<div class="require">{{ item.remark || "" }}</div>
|
||||
<div class="info">
|
||||
<div class="tag" style="background-color:#1AAAFF">企业招工</div>
|
||||
<div class="date">{{ item.createTime && item.createTime.slice(0, 16) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="company">{{ item.companyName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<AiEmpty v-else></AiEmpty>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" @click="$linkTo('./pubJob')" hover-class="text-hover">我要找工作</div>
|
||||
</div>
|
||||
<u-select v-model="show" :list="selectList" @confirm="onConfirm"></u-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: "AppJob",
|
||||
appName: "招工就业",
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
current: 1,
|
||||
list: [],
|
||||
total: 0,
|
||||
search: {
|
||||
title: "",
|
||||
type: "",
|
||||
typeName: "",
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
selectList() {
|
||||
return [{
|
||||
value: '',
|
||||
label: '全部'
|
||||
}, {
|
||||
value: '0',
|
||||
label: '企业招工'
|
||||
},
|
||||
{
|
||||
value: '1',
|
||||
label: '个人求职'
|
||||
}];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
preview(index) {
|
||||
this.$previewImage(this.list, index, "url");
|
||||
},
|
||||
phone({linkPhone: phoneNumber}) {
|
||||
uni.makePhoneCall({phoneNumber});
|
||||
},
|
||||
onConfirm(val) {
|
||||
this.search.typeName = val[0].label;
|
||||
this.search.type = val[0].value;
|
||||
this.current = 1;
|
||||
this.getList();
|
||||
},
|
||||
getList() {
|
||||
this.$instance.post("/app/appjob/list", null, {
|
||||
params: {
|
||||
...this.search,
|
||||
current: this.current
|
||||
}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
|
||||
this.total = res.data.total;
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail(val, {id}) {
|
||||
uni.navigateTo({
|
||||
url: !!val ? `./compJob?id=${id}` : `./persJob?id=${id}`
|
||||
})
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
this.current = 1;
|
||||
this.getList();
|
||||
},
|
||||
onReachBottom() {
|
||||
this.current++;
|
||||
this.getList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
padding-top: 124px;
|
||||
}
|
||||
|
||||
.search-wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 11;
|
||||
width: 100%;
|
||||
height: 124px;
|
||||
background: #4181FF;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > span {
|
||||
font-size: 40px;
|
||||
font-weight: 500;
|
||||
color: #FFFFFF;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
height: 64px;
|
||||
background: rgba(0, 0, 0, .2);
|
||||
border-radius: 32px;
|
||||
margin-left: 32px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.job-list {
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px 156px;
|
||||
|
||||
& > header {
|
||||
box-sizing: border-box;
|
||||
padding: 48px 0 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
& > span {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.right {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #666666;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > em {
|
||||
color: #4181FF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.02);
|
||||
border-radius: 16px;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.top {
|
||||
box-sizing: border-box;
|
||||
padding: 32px;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
|
||||
.title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 50px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.job-content {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
line-height: 44px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.photo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
|
||||
& > img {
|
||||
width: 204px;
|
||||
height: 204px;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
|
||||
.tag {
|
||||
width: 144px;
|
||||
height: 48px;
|
||||
background: #42D784;
|
||||
border-radius: 24px;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #FFFFFF;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.post-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.post {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.salary {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #FF3521;
|
||||
}
|
||||
}
|
||||
|
||||
.require {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
height: 104px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 32px;
|
||||
|
||||
.name {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #4181FF;
|
||||
}
|
||||
|
||||
.company {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
150
src/mods/AppJob/compJob.vue
Normal file
150
src/mods/AppJob/compJob.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="card">
|
||||
<div class="post-info">
|
||||
<div class="post-name">
|
||||
<span>{{ detail.title }}</span>
|
||||
<span>{{ detail.salary }}</span>
|
||||
</div>
|
||||
<p>{{ detail.education }} | {{ detail.gender }} | {{ detail.age }}岁</p>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="label">招聘企业</div>
|
||||
<div class="value">{{ detail.companyName }}</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="label">招聘联系人</div>
|
||||
<div class="value">{{ detail.linkName }}</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="label">联系方式</div>
|
||||
<div class="value phone" @click="phone">
|
||||
<u-icon name="phone-fill" color="#4181FF" size="32" :custom-stype="{marginRight:'8px'}"></u-icon>
|
||||
{{ detail.linkPhone }}
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="detail.remark">
|
||||
<header>岗位要求</header>
|
||||
<div class="post-require">{{ detail.remark }}
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "compJob",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
this.id = id;
|
||||
this.getDetail();
|
||||
},
|
||||
methods: {
|
||||
phone() {
|
||||
uni.makePhoneCall({phoneNumber: this.detail.linkPhone});
|
||||
},
|
||||
getDetail() {
|
||||
this.$instance.post("/app/appjob/detail", null, {
|
||||
params: {id: this.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: "企业招工",
|
||||
path: "/mods/AppJob/compJob?id=" + this.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
padding: 32px 0 32px 32px;
|
||||
background-color: #ffffff;
|
||||
|
||||
.post-info {
|
||||
padding-right: 32px;
|
||||
|
||||
.post-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
line-height: 56px;
|
||||
|
||||
& > span:first-child {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
& > span:last-child {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
color: #FF3521;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
& > p {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin: 16px 0 32px;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
height: 112px;
|
||||
background: #FFFFFF;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
padding-right: 32px;
|
||||
|
||||
.label {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28px;
|
||||
color: #4181FF;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.post-require {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 56px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/mods/AppJob/persJob.vue
Normal file
155
src/mods/AppJob/persJob.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div class="padding">
|
||||
<div class="card">
|
||||
<div class="post-info">{{ detail.title }}
|
||||
</div>
|
||||
<div class="date">{{ detail.createTime }}</div>
|
||||
<div class="form border">
|
||||
<div class="label">求职联系人</div>
|
||||
<div class="value">{{ detail.linkName }}</div>
|
||||
</div>
|
||||
<div class="form border">
|
||||
<div class="label">联系方式</div>
|
||||
<div class="value phone" @click="phone">
|
||||
<u-icon name="phone-fill" color="#4181FF" size="32" :custom-stype="{marginRight:'8px'}"></u-icon>
|
||||
{{ detail.linkPhone }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<div class="label">图片</div>
|
||||
</div>
|
||||
<div class="photo border">
|
||||
<img :src="item.url" alt=""
|
||||
v-for="(item,index) in detail.files" :key="index" @click="preview(index)">
|
||||
</div>
|
||||
<header>详细描述</header>
|
||||
<div class="post-require">{{ detail.remark }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "persJob",
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
detail: {},
|
||||
}
|
||||
},
|
||||
onLoad({id}) {
|
||||
this.id = id;
|
||||
this.getDetail();
|
||||
},
|
||||
methods: {
|
||||
preview(index) {
|
||||
this.$previewImage(this.detail.files, index, "url");
|
||||
},
|
||||
phone() {
|
||||
uni.makePhoneCall({phoneNumber: this.detail.linkPhone});
|
||||
},
|
||||
getDetail() {
|
||||
this.$instance.post("/app/appjob/detail", null, {
|
||||
params: {id: this.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data;
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: "个人求职",
|
||||
path: "/mods/AppJob/persJob?id=" + this.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.padding {
|
||||
min-height: 100%;
|
||||
background-color: #ffffff;
|
||||
|
||||
.card {
|
||||
padding: 32px 0 32px 32px;
|
||||
background-color: #ffffff;
|
||||
|
||||
.post-info {
|
||||
font-size: 40px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
line-height: 56px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
margin: 16px 0 32px;
|
||||
}
|
||||
|
||||
.form {
|
||||
height: 112px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-right: 32px;
|
||||
|
||||
.label {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.phone {
|
||||
font-size: 28px;
|
||||
color: #4181FF;
|
||||
}
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.photo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
padding-bottom: 48px;
|
||||
|
||||
& > img {
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
}
|
||||
}
|
||||
|
||||
header {
|
||||
font-size: 38px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
padding: 32px 0;
|
||||
}
|
||||
|
||||
.post-require {
|
||||
font-size: 32px;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 56px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
159
src/mods/AppJob/pubJob.vue
Normal file
159
src/mods/AppJob/pubJob.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="wrapper">
|
||||
<div class="card">
|
||||
<div class="form">
|
||||
<em>*</em>
|
||||
<label>标题</label>
|
||||
</div>
|
||||
<u-input type="textarea" trim placeholder="请输入标题" maxlength="100" v-model="form.title"
|
||||
placeholder-style="color: #999999;font-size: 17px;font-weight:normal;"
|
||||
:custom-style="{color:'#333',fontSize:'17px',paddingLeft:'12px'}"/>
|
||||
<div class="form border-top">
|
||||
<em>*</em>
|
||||
<label>详细描述</label>
|
||||
</div>
|
||||
<u-input type="textarea" trim placeholder="请输入详细描述信息…" maxlength="500" v-model="form.remark"
|
||||
placeholder-style="color: #999999;font-size: 17px;font-weight:normal;"
|
||||
:custom-style="{color:'#333',fontSize:'17px',paddingLeft:'12px'}"/>
|
||||
</div>
|
||||
<div class="card" style="padding-bottom: 20px">
|
||||
<div class="form">
|
||||
<label>图片上传
|
||||
<span>(最多9张)</span>
|
||||
</label>
|
||||
</div>
|
||||
<AiUploader :limit="9" v-model="form.files"></AiUploader>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="form border">
|
||||
<em>*</em>
|
||||
<label>联系人</label>
|
||||
<div class="right">
|
||||
<u-input trim placeholder="请输入" input-align="right"
|
||||
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkName"
|
||||
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form">
|
||||
<em>*</em>
|
||||
<label>联系方式</label>
|
||||
<div class="right">
|
||||
<u-input trim placeholder="请输入" input-align="right"
|
||||
placeholder-style="color:#999;font-size: 17px;font-weight:normal;" v-model="form.linkPhone"
|
||||
:custom-style="{fontWeight:600,color:'#333',fontSize:'17px'}"></u-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btn-wrapper">
|
||||
<div class="btn" @click="submit" hover-class="text-hover">提交</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AiUploader from '../../components/AiUploader/AiUploader'
|
||||
|
||||
export default {
|
||||
name: "pubJob",
|
||||
components: {AiUploader},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
title: "",
|
||||
remark: "",
|
||||
files: [],
|
||||
linkName: "",
|
||||
linkPhone: "",
|
||||
type: 1,
|
||||
},
|
||||
flag: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
if (!!!this.form.title) return this.$u.toast("请输入标题");
|
||||
if (!!!this.form.remark) return this.$u.toast("请输入详细描述");
|
||||
if (!!!this.form.linkName) return this.$u.toast("请输入联系人");
|
||||
if (!!!this.form.linkPhone) return this.$u.toast("请输入联系方式");
|
||||
if (this.flag) return
|
||||
this.flag = true
|
||||
this.$loading()
|
||||
this.$instance.post("/app/appjob/addOrUpdate", {
|
||||
...this.form
|
||||
}).then(res => {
|
||||
this.$hideLoading()
|
||||
this.flag = false
|
||||
if (res.code == 0) {
|
||||
this.$u.toast("提交成功");
|
||||
setTimeout(_ => {
|
||||
uni.navigateBack();
|
||||
}, 500)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrapper {
|
||||
padding-bottom: 150px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-sizing: border-box;
|
||||
padding-left: 32px;
|
||||
background-color: #fff;
|
||||
margin-bottom: 24px;
|
||||
|
||||
.form {
|
||||
height: 112px;
|
||||
background: #FFFFFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
& > em {
|
||||
width: 16px;
|
||||
height: 44px;
|
||||
font-weight: 400;
|
||||
color: #FF4466;
|
||||
line-height: 54px;
|
||||
font-style: normal;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
& > label {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
color: #666666;
|
||||
|
||||
& > span {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
margin-right: 32px;
|
||||
|
||||
.value {
|
||||
font-size: 34px;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.border-top {
|
||||
border-top: 1px solid #DDDDDD;
|
||||
}
|
||||
|
||||
.border {
|
||||
border-bottom: 1px solid #DDDDDD;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user