闲散交易
This commit is contained in:
liuye
296
src/project/dongsheng/AppAgProducts/AppAgProducts.vue
Normal file
296
src/project/dongsheng/AppAgProducts/AppAgProducts.vue
Normal file
@@ -0,0 +1,296 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper padding">
|
||||||
|
<!-- <u-tabs :list="tabs" height="124" font-size="40" bg-color="#4181FF" inactive-color="rgba(255,255,255,0.75)"
|
||||||
|
:bar-style="{backgroundColor:'#fff'}" :active-item-style="active"
|
||||||
|
:is-scroll="true" :current="index" @change="onChange"></u-tabs> -->
|
||||||
|
<div class="tabs">
|
||||||
|
<u-tabs
|
||||||
|
:list="tabs"
|
||||||
|
font-size="36"
|
||||||
|
bg-color="transparent"
|
||||||
|
:bold="false"
|
||||||
|
inactive-color="#ccddff"
|
||||||
|
:is-scroll="true"
|
||||||
|
:gutter="16"
|
||||||
|
active-color="#fff"
|
||||||
|
:current="index"
|
||||||
|
@change="onChange">
|
||||||
|
</u-tabs>
|
||||||
|
</div>
|
||||||
|
<header>
|
||||||
|
<span @click="show=true">{{ !typeName ? '全部类型' : typeName }}
|
||||||
|
<u-icon name="arrow-down" size="28" color="#333333" :custom-style="{marginLeft:'8px'}"></u-icon>
|
||||||
|
</span>
|
||||||
|
<div class="total">
|
||||||
|
共<em>{{ list.total }}</em>个农产品
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<div class="card-list">
|
||||||
|
<div class="card" v-for="(item,index) in list.list" :key="index" @click="toDetail(item)">
|
||||||
|
<div class="top">
|
||||||
|
<div class="title">{{ item.title }}
|
||||||
|
</div>
|
||||||
|
<div class="ag-content">{{ item.content }}
|
||||||
|
</div>
|
||||||
|
<div class="phone-wrap">
|
||||||
|
<img class="img" :class="[item.files.length ==1 ? 'single' : '']" v-for="(photo,idx) in item.files"
|
||||||
|
:key="idx" :src="photo.url" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="ag-info">
|
||||||
|
<div class="tag">{{ $dict.getLabel('agriculturalType', item.type) }}</div>
|
||||||
|
<div class="date">{{ item.createTime }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="phone" @click.stop="phone(item.phone)">
|
||||||
|
<u-icon name="phone-fill" size="32" color="#4181FF"></u-icon>
|
||||||
|
<span>{{ item.phone }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AiEmpty v-if="!list.list.length"/>
|
||||||
|
<div class="btn-wrapper">
|
||||||
|
<div class="btn" @click="suport" hover-class="text-hover">我要发布</div>
|
||||||
|
</div>
|
||||||
|
<u-select v-model="show" :list="$dict.getDict('agriculturalTypeSearch')" value-name="dictValue"
|
||||||
|
label-name="dictName" @confirm="confirm"></u-select>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from "dvcp-wui/utils/list";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppAgProducts",
|
||||||
|
appName: "闲散交易",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
index: 0,
|
||||||
|
show: false,
|
||||||
|
type: "",
|
||||||
|
typeName: "",
|
||||||
|
list: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onLoad() {
|
||||||
|
this.$dict.load("agriculturalTypeSearch");
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
active() {
|
||||||
|
return {
|
||||||
|
fontSize: "22px",
|
||||||
|
color: "#FFFFFF",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
tabs() {
|
||||||
|
return [{
|
||||||
|
name: '全部'
|
||||||
|
}, {
|
||||||
|
name: '我的发布'
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
preview(photos, index) {
|
||||||
|
this.$previewImage(photos, index, "url");
|
||||||
|
},
|
||||||
|
onChange(val) {
|
||||||
|
this.index = val;
|
||||||
|
if (!!this.index) {
|
||||||
|
this.getMine();
|
||||||
|
} else this.getAll();
|
||||||
|
},
|
||||||
|
phone(phoneNumber) {
|
||||||
|
uni.makePhoneCall({phoneNumber});
|
||||||
|
},
|
||||||
|
confirm(val) {
|
||||||
|
this.type = val[0].value;
|
||||||
|
this.typeName = val[0].label;
|
||||||
|
if (!!this.index) {
|
||||||
|
this.getMine();
|
||||||
|
} else this.getAll();
|
||||||
|
},
|
||||||
|
getAll() {
|
||||||
|
const {type} = this
|
||||||
|
this.list = new List("/app/appshowagriculturalproduce/list")
|
||||||
|
this.list.init({type})
|
||||||
|
},
|
||||||
|
getMine() {
|
||||||
|
const {type} = this
|
||||||
|
this.list = new List("/app/appshowagriculturalproduce/listByWx")
|
||||||
|
this.list.init({type})
|
||||||
|
},
|
||||||
|
toDetail({id}) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "./agDetail?id=" + id + "&type=" + this.index
|
||||||
|
})
|
||||||
|
},
|
||||||
|
suport() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: "./agAdd"
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
if (!!this.index) {
|
||||||
|
this.getMine();
|
||||||
|
} else {
|
||||||
|
this.getAll();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReachBottom() {
|
||||||
|
const {type} = this
|
||||||
|
this.list.loadMore({type})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.padding {
|
||||||
|
padding-top: 100px;
|
||||||
|
padding-bottom: 156px;
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 11;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 0 10px 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #4181FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 48px 32px 32px;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
font-size: 38px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total {
|
||||||
|
margin-left: auto;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #666666;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
& > em {
|
||||||
|
color: #4181FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0 32px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px -1px 0px 0px #DDDDDD;
|
||||||
|
border-radius: 16px 16px 0px 0px;
|
||||||
|
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;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ag-content {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 44px;
|
||||||
|
margin-top: 8px;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone-wrap {
|
||||||
|
gap: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 203px;
|
||||||
|
height: 204px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.single {
|
||||||
|
width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ag-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 24px;
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
width: 88px;
|
||||||
|
height: 48px;
|
||||||
|
background: #EEEEEE;
|
||||||
|
border-radius: 24px;
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.phone {
|
||||||
|
height: 104px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 32px;
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
width: 32px;
|
||||||
|
height: 33px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #4181FF;
|
||||||
|
margin-left: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
174
src/project/dongsheng/AppAgProducts/agAdd.vue
Normal file
174
src/project/dongsheng/AppAgProducts/agAdd.vue
Normal file
@@ -0,0 +1,174 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="card">
|
||||||
|
<div class="form">
|
||||||
|
<em>*</em>
|
||||||
|
<label>标题</label>
|
||||||
|
</div>
|
||||||
|
<u-input type="textarea" trim placeholder="请输入标题" maxlength="100"
|
||||||
|
placeholder-style="color: #999999;font-size: 15px;" v-model="form.title"/>
|
||||||
|
<div class="form" style="border-top: 1px solid #dddddd;">
|
||||||
|
<em>*</em>
|
||||||
|
<label>详细描述</label>
|
||||||
|
</div>
|
||||||
|
<u-input type="textarea" trim placeholder="请输入详细描述信息" maxlength="500"
|
||||||
|
placeholder-style="color: #999999;font-size: 15px;" v-model="form.content"/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="form">
|
||||||
|
<em>*</em>
|
||||||
|
<label>农产品类型</label>
|
||||||
|
<AiSelect class="right" v-model="form.type" dict="agriculturalType"/>
|
||||||
|
</div>
|
||||||
|
</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">
|
||||||
|
<label>联系人</label>
|
||||||
|
<div class="right">
|
||||||
|
<u-input trim placeholder="请输入" input-align="right"
|
||||||
|
placeholder-style="color:#999;font-size: 17px;" v-model="form.contactPerson"></u-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<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;" :maxlength="11" v-model="form.phone"></u-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form">
|
||||||
|
<label>地址</label>
|
||||||
|
<div class="right">
|
||||||
|
<u-input trim placeholder="请输入" input-align="right" style="flex: 1;margin-left: 16px;"
|
||||||
|
placeholder-style="color:#999;font-size: 17px;" v-model="form.address"></u-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn-wrapper">
|
||||||
|
<div class="btn" @click="submit" hover-class="text-hover">提交</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "agAdd",
|
||||||
|
appName: "发布闲散交易",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
form: {
|
||||||
|
title: "",
|
||||||
|
content: "",
|
||||||
|
type: "",
|
||||||
|
typeName: "",
|
||||||
|
files: [],
|
||||||
|
contactPerson: "",
|
||||||
|
phone: "",
|
||||||
|
address: "",
|
||||||
|
},
|
||||||
|
flag: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad() {
|
||||||
|
this.$dict.load("agriculturalType");
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
submit() {
|
||||||
|
if (!!!this.form.title) return this.$u.toast("请输入标题");
|
||||||
|
if (!!!this.form.content) return this.$u.toast("请输入详细描述");
|
||||||
|
if (!!!this.form.type) return this.$u.toast("请选择农产品类型");
|
||||||
|
if (!!!this.form.phone) return this.$u.toast("请输入联系方式");
|
||||||
|
if (this.flag) return
|
||||||
|
this.flag = true
|
||||||
|
this.$loading()
|
||||||
|
this.$instance.post("/app/appshowagriculturalproduce/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: 500;
|
||||||
|
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 {
|
||||||
|
border-bottom: 1px solid #DDDDDD;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
200
src/project/dongsheng/AppAgProducts/agDetail.vue
Normal file
200
src/project/dongsheng/AppAgProducts/agDetail.vue
Normal file
@@ -0,0 +1,200 @@
|
|||||||
|
<template>
|
||||||
|
<div class="wrapper padding">
|
||||||
|
<div class="card">
|
||||||
|
<header>{{ detail.title }}</header>
|
||||||
|
<div class="date">{{ detail.createTime }}</div>
|
||||||
|
<div class="detail-content">{{ detail.content }}
|
||||||
|
</div>
|
||||||
|
<div class="photo-title">图片</div>
|
||||||
|
<div class="photo-wrap">
|
||||||
|
<img :src="item.url" alt=""
|
||||||
|
v-for="(item,index) in detail.files" :key="index" @click="preview(index)">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<AiGroup>
|
||||||
|
<AiItem v-if="detail.contactPerson" label="联系人" :value="detail.contactPerson"/>
|
||||||
|
<AiItem label="联系方式">
|
||||||
|
<u-icon name="phone-fill" size="32" label-size="32" color="#4181FF" labelColor="#4181FF" :label="detail.phone" @click="phone"/>
|
||||||
|
</AiItem>
|
||||||
|
<AiItem v-if="detail.address" label="地址" :value="detail.address"/>
|
||||||
|
</AiGroup>
|
||||||
|
<div class="btn-wrapper" v-if="detail.openId == user.openId">
|
||||||
|
<div class="btn" @click="unDo" hover-class="text-hover">撤销发布</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="btn" @click="unDo" v-if="type==1">撤销发布</div> -->
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "agDetail",
|
||||||
|
appName: "农产品详情",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: null,
|
||||||
|
type: null,
|
||||||
|
detail: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onLoad(opt) {
|
||||||
|
this.id = opt.id;
|
||||||
|
this.type = opt.type;
|
||||||
|
this.getDetail();
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
preview(index) {
|
||||||
|
this.$previewImage(this.detail.files, index, "url");
|
||||||
|
},
|
||||||
|
phone() {
|
||||||
|
uni.makePhoneCall({
|
||||||
|
phoneNumber: this.detail.phone
|
||||||
|
})
|
||||||
|
},
|
||||||
|
unDo() {
|
||||||
|
uni.showModal({
|
||||||
|
title: "提示",
|
||||||
|
content: "是否确定要撤销？",
|
||||||
|
success: res => {
|
||||||
|
if (res.confirm) {
|
||||||
|
this.$instance.post("/app/appshowagriculturalproduce/delete", null, {
|
||||||
|
params: {ids: this.id}
|
||||||
|
}).then(ret => {
|
||||||
|
if (ret.code == 0) {
|
||||||
|
this.$u.toast("撤销成功");
|
||||||
|
setTimeout(_ => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
getDetail() {
|
||||||
|
this.$instance.post("/app/appshowagriculturalproduce/queryDetailById", null, {
|
||||||
|
params: {id: this.id}
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.data) {
|
||||||
|
this.detail = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.padding {
|
||||||
|
padding-bottom: 156px;
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 40px 32px;
|
||||||
|
|
||||||
|
header {
|
||||||
|
font-size: 48px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 66px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date {
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.detail-content {
|
||||||
|
font-size: 36px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 64px;
|
||||||
|
margin-top: 64px;
|
||||||
|
padding-bottom: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-title {
|
||||||
|
height: 112px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-wrap {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
& > img {
|
||||||
|
width: 225px;
|
||||||
|
height: 225px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 32px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.value {
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #4181FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.address {
|
||||||
|
width: 480px;
|
||||||
|
font-size: 32px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 44px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-wrapper {
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
width: 686px;
|
||||||
|
height: 88px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 16px;
|
||||||
|
border: 1px solid #FF4466;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 34px;
|
||||||
|
font-weight: 600;
|
||||||
|
position: fixed;
|
||||||
|
left: 50%;
|
||||||
|
bottom: 32px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
color: #FF4466;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -109,7 +109,7 @@ import {mapActions, mapState} from 'vuex'
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "AppPartyEnteringCommunity",
|
name: "AppPartyEnteringCommunity",
|
||||||
appName: "党建社区",
|
appName: "首页",
|
||||||
customNavigation: true,
|
customNavigation: true,
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
Reference in New Issue
Block a user