You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
623 lines
20 KiB
623 lines
20 KiB
<template>
|
|
<view class="container">
|
|
<view class="header">
|
|
<view class="title">闲置农房信息录入</view>
|
|
</view>
|
|
|
|
<view class="form-container">
|
|
<uv-form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="80" labelStyle="font-size:28rpx;">
|
|
|
|
<!-- 必填项 -->
|
|
<view class="section-title">基本信息（必填）</view>
|
|
|
|
<!-- 1. 出租/流转 -->
|
|
<uv-form-item label="类型" prop="type" required>
|
|
<uv-radio-group v-model="form.type" placement="row">
|
|
<uv-radio name="rent" label="出租"></uv-radio>
|
|
<uv-radio name="transfer" customStyle="margin-left:30rpx;" label="流转"></uv-radio>
|
|
</uv-radio-group>
|
|
</uv-form-item>
|
|
|
|
<!-- 2. 地址 -->
|
|
<uv-form-item label="地址" prop="address" required @click="handleAddressSelect()">
|
|
<uv-input v-model="form.address" @click="handleAddressSelect()" disabled disabledColor="#ffffff" placeholder="请选择房屋位置" border="none">
|
|
</uv-input>
|
|
<template v-slot:right>
|
|
<uv-icon name="arrow-right"></uv-icon>
|
|
</template>
|
|
</uv-form-item>
|
|
|
|
<!-- 3. 联系人和电话 -->
|
|
<uv-form-item label="联系人" prop="contactName" required>
|
|
<uv-input v-model="form.contactName" type="text" placeholder="请输入联系人姓名" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
|
|
</uv-form-item>
|
|
|
|
<uv-form-item label="联系电话" prop="contactPhone" required>
|
|
<uv-input v-model="form.contactPhone" type="number" placeholder="请输入联系电话" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
|
|
</uv-form-item>
|
|
|
|
<!-- 4. 房屋状况 -->
|
|
<uv-form-item label="房屋状况" prop="houseCondition" required @click="handleHouseConditionSelect()">
|
|
<uv-input v-model="form.houseConditionName" @click="handleHouseConditionSelect()" disabled disabledColor="#ffffff" placeholder="请选择房屋状况" border="none">
|
|
</uv-input>
|
|
<template v-slot:right>
|
|
<uv-icon name="arrow-right"></uv-icon>
|
|
</template>
|
|
</uv-form-item>
|
|
|
|
<!-- 5. 产权证照片 -->
|
|
<uv-form-item label="产权证照片" labelWidth="250" prop="propertyImages" labelPosition="top" required>
|
|
<view class="upload-tip">请上传房产证、土地证或不动产权证照片</view>
|
|
<uv-upload customStyle="margin-top:20rpx;" :fileList="form.propertyImages" @afterRead="afterPropertyRead" @delete="deletePropertyPic" name="1"
|
|
multiple :maxCount="5"></uv-upload>
|
|
</uv-form-item>
|
|
|
|
<!-- 6. 产权面积 -->
|
|
<uv-form-item label="房屋面积" prop="houseArea" required>
|
|
<view class="input-with-unit">
|
|
<uv-input v-model="form.houseArea" type="digit" placeholder="请输入房屋面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
|
|
<text class="unit">平米</text>
|
|
</view>
|
|
<view class="input-tip">请录入房屋证或不动产权证登记面积</view>
|
|
</uv-form-item>
|
|
|
|
<uv-form-item label="土地面积" prop="landArea" required>
|
|
<view class="input-with-unit">
|
|
<uv-input v-model="form.landArea" type="digit" placeholder="请输入土地面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
|
|
<text class="unit">平米</text>
|
|
</view>
|
|
<view class="input-tip">请录入土地使用证或不动产权证面积</view>
|
|
</uv-form-item>
|
|
|
|
<!-- 7. 房屋正面照片 -->
|
|
<uv-form-item label="房屋正面照片" labelWidth="250" prop="frontImages" labelPosition="top" required>
|
|
<view class="upload-tip">作为封面展示，建议拍摄房屋正面全貌</view>
|
|
<uv-upload customStyle="margin-top:20rpx;" :fileList="form.frontImages" @afterRead="afterFrontRead" @delete="deleteFrontPic" name="1"
|
|
multiple :maxCount="3"></uv-upload>
|
|
</uv-form-item>
|
|
|
|
<!-- 8. 房屋视频 -->
|
|
<uv-form-item label="房屋视频" labelWidth="250" prop="videos" labelPosition="top" required>
|
|
<view class="upload-tip">请上传房屋内部和外部视频（1分钟内）</view>
|
|
<uv-upload customStyle="margin-top:20rpx;" accept="video" :fileList="form.videos" @afterRead="afterVideoRead" @delete="deleteVideoPic" name="1"
|
|
multiple :maxCount="2"></uv-upload>
|
|
</uv-form-item>
|
|
|
|
<!-- 9. 价格 -->
|
|
<uv-form-item label="价格" prop="price" required>
|
|
<view class="price-container">
|
|
<uv-input v-model="form.price" type="digit" placeholder="请输入价格" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;flex:1;"></uv-input>
|
|
<text class="price-unit" v-if="form.type === 'rent'">元/年</text>
|
|
<text class="price-unit" v-else-if="form.type === 'transfer'">万元</text>
|
|
<text class="price-unit" v-else>元</text>
|
|
</view>
|
|
<view class="input-tip">请输入数字，支持小数点后两位</view>
|
|
</uv-form-item>
|
|
|
|
<!-- 分类标识 -->
|
|
<uv-form-item label="分类标识" prop="classId" @click="handleClass()">
|
|
<uv-input v-model="form.className" @click="handleClass()" disabled disabledColor="#ffffff" placeholder="选择分类标识" border="none">
|
|
</uv-input>
|
|
<template v-slot:right>
|
|
<uv-icon name="arrow-right"></uv-icon>
|
|
</template>
|
|
</uv-form-item>
|
|
|
|
<!-- 选填项 -->
|
|
<view class="section-title">详细信息（选填）</view>
|
|
|
|
<!-- 10. 可用菜地 -->
|
|
<uv-form-item label="可用菜地" prop="vegetableGarden">
|
|
<view class="input-with-unit">
|
|
<uv-input v-model="form.vegetableGarden" type="digit" placeholder="请输入菜地面积" customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:5px 10px;"></uv-input>
|
|
<text class="unit">平米</text>
|
|
</view>
|
|
</uv-form-item>
|
|
|
|
<!-- 11. 房屋亮点 -->
|
|
<uv-form-item label="房屋亮点" prop="highlights" labelPosition="top">
|
|
<view class="tags-container">
|
|
<view
|
|
class="tag-item"
|
|
:class="{ 'tag-selected': form.highlights.includes(item) }"
|
|
v-for="item in highlightOptions"
|
|
:key="item"
|
|
@click="toggleHighlight(item)"
|
|
>
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</uv-form-item>
|
|
|
|
<!-- 12. 不利因素 -->
|
|
<uv-form-item label="不利因素" prop="disadvantages" labelPosition="top">
|
|
<view class="tags-container">
|
|
<view
|
|
class="tag-item disadvantage-tag"
|
|
:class="{ 'tag-selected': form.disadvantages.includes(item) }"
|
|
v-for="item in disadvantageOptions"
|
|
:key="item"
|
|
@click="toggleDisadvantage(item)"
|
|
>
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
</uv-form-item>
|
|
|
|
<!-- 13. 房屋介绍 -->
|
|
<uv-form-item label="房屋介绍" prop="description" labelPosition="top">
|
|
<uv-input
|
|
v-model="form.description"
|
|
type="textarea"
|
|
placeholder="请详细介绍房屋情况、周边环境等"
|
|
customStyle="border-radius: 5px;margin-top:5px;background-color: #f5f5f5;padding:10px;"
|
|
:autoHeight="true"
|
|
:maxlength="500"
|
|
></uv-input>
|
|
</uv-form-item>
|
|
|
|
<uv-form-item>
|
|
<uv-button type="primary" text="提交信息" customStyle="margin-top: 30px;background-color: #1EC77A;border-radius: 30px;" @click="submit"></uv-button>
|
|
</uv-form-item>
|
|
</uv-form>
|
|
</view>
|
|
|
|
<!-- 房屋状况选择器 -->
|
|
<uv-picker ref="houseConditionPicker" :columns="houseConditionColumns" @confirm="confirmHouseCondition"></uv-picker>
|
|
|
|
<!-- 分类选择器 -->
|
|
<uv-picker ref="picker" :columns="columns" @confirm="confirm"></uv-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { saveOrUpdateHouse, houseType } from "@/common/api.js"
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
commonClass: '', // 所属分类ID
|
|
form: {
|
|
type: '', // 出租/流转
|
|
address: '', // 地址
|
|
contactName: '', // 联系人
|
|
contactPhone: '', // 联系电话
|
|
houseCondition: '', // 房屋状况ID
|
|
houseConditionName: '', // 房屋状况名称
|
|
propertyImages: [], // 产权证照片
|
|
houseArea: '', // 房屋面积
|
|
landArea: '', // 土地面积
|
|
frontImages: [], // 房屋正面照片
|
|
videos: [], // 房屋视频
|
|
price: '', // 价格
|
|
longitude: '', // 经度
|
|
latitude: '', // 纬度
|
|
vegetableGarden: '', // 可用菜地
|
|
highlights: [], // 房屋亮点
|
|
disadvantages: [], // 不利因素
|
|
description: '', // 房屋介绍
|
|
classId: '', // 分类标识
|
|
className: '' // 分类名称
|
|
},
|
|
houseConditionColumns: [
|
|
['老旧房屋', '装修较好可拎包入住', '新房']
|
|
],
|
|
highlightOptions: [
|
|
'靠河', '靠山', '通自来水', '通天然气', '近场镇或城市',
|
|
'双车道到家', '精装修', '四合院', '周边无坟墓', '周边无电线塔'
|
|
],
|
|
disadvantageOptions: [
|
|
'可见坟墓', '周边有电塔', '非正常死亡'
|
|
],
|
|
columns: [], // 分类选择器数据
|
|
houseTypeList: [], // 分类列表
|
|
rules: {
|
|
type: [
|
|
{ required: true, message: '请选择出租或流转', trigger: ['blur', 'change'] }
|
|
],
|
|
address: [
|
|
{ required: true, message: '请选择房屋地址', trigger: ['blur', 'change'] }
|
|
],
|
|
contactName: [
|
|
{ required: true, message: '请输入联系人姓名', trigger: ['blur', 'change'] }
|
|
],
|
|
contactPhone: [
|
|
{ required: true, message: '请输入联系电话', trigger: ['blur', 'change'] },
|
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: ['blur', 'change'] }
|
|
],
|
|
houseCondition: [
|
|
{ required: true, message: '请选择房屋状况', trigger: ['blur', 'change'] }
|
|
],
|
|
houseArea: [
|
|
{ required: true, message: '请输入房屋面积', trigger: ['blur', 'change'] },
|
|
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: ['blur', 'change'] }
|
|
],
|
|
landArea: [
|
|
{ required: true, message: '请输入土地面积', trigger: ['blur', 'change'] },
|
|
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的数字格式', trigger: ['blur', 'change'] }
|
|
],
|
|
price: [
|
|
{ required: true, message: '请输入价格', trigger: ['blur', 'change'] },
|
|
{ pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的价格格式', trigger: ['blur', 'change'] }
|
|
],
|
|
classId: [
|
|
{ required: true, message: '请选择分类标识', trigger: ['blur', 'change'] }
|
|
]
|
|
}
|
|
}
|
|
},
|
|
onReady() {
|
|
this.$refs.form.setRules(this.rules)
|
|
},
|
|
onLoad(options) {
|
|
// 设置页面标题
|
|
uni.setNavigationBarTitle({
|
|
title: '闲置农房录入'
|
|
})
|
|
|
|
// 接收传递的commonClass参数
|
|
if(options.commonClass) {
|
|
this.commonClass = options.commonClass
|
|
}
|
|
|
|
// 如果是编辑模式，设置classId用于回显
|
|
if(options.classId) {
|
|
this.form.classId = options.classId
|
|
}
|
|
|
|
// 初始化分类数据
|
|
this.onHouseType()
|
|
},
|
|
methods: {
|
|
// 获取分类数据
|
|
onHouseType(){
|
|
let that = this
|
|
houseType({}).then(response=>{
|
|
let arr=[]
|
|
that.houseTypeList = response.result
|
|
response.result.forEach(items=>{
|
|
arr.push(items.title)
|
|
// 数据回显：如果当前classId匹配，设置className
|
|
if(items.id == that.form.classId){
|
|
that.form.className = items.title
|
|
}
|
|
})
|
|
that.columns[0]=arr
|
|
}).catch(error=>{
|
|
|
|
})
|
|
},
|
|
|
|
// 地址选择
|
|
handleAddressSelect() {
|
|
const that = this;
|
|
wx.chooseLocation({
|
|
success: function (res) {
|
|
console.log('选择的位置：', res);
|
|
that.form.longitude = res.longitude
|
|
that.form.latitude = res.latitude
|
|
that.form.address = res.address
|
|
}
|
|
})
|
|
},
|
|
|
|
// 房屋状况选择
|
|
handleHouseConditionSelect() {
|
|
this.$refs.houseConditionPicker.open();
|
|
},
|
|
|
|
confirmHouseCondition(e) {
|
|
const { indexs, value } = e;
|
|
this.form.houseCondition = value[0]; // 修改：直接使用选择的值而不是索引
|
|
this.form.houseConditionName = value[0];
|
|
},
|
|
|
|
// 分类标识选择
|
|
handleClass() {
|
|
this.$refs.picker.open();
|
|
},
|
|
|
|
confirm(e) {
|
|
let that = this
|
|
let {indexs,value,values} = e
|
|
that.form.classId = that.houseTypeList[indexs[0]].id;
|
|
that.form.className = that.houseTypeList[indexs[0]].title;
|
|
},
|
|
|
|
// 产权证照片上传
|
|
async afterPropertyRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.form.propertyImages.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
deletePropertyPic(event) {
|
|
this.form.propertyImages.splice(event.index, 1)
|
|
},
|
|
|
|
// 房屋正面照片上传
|
|
async afterFrontRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.form.frontImages.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
deleteFrontPic(event) {
|
|
this.form.frontImages.splice(event.index, 1)
|
|
},
|
|
|
|
// 视频上传
|
|
async afterVideoRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.form.videos.push({
|
|
url
|
|
})
|
|
})
|
|
})
|
|
},
|
|
|
|
deleteVideoPic(event) {
|
|
this.form.videos.splice(event.index, 1)
|
|
},
|
|
|
|
// 切换房屋亮点
|
|
toggleHighlight(item) {
|
|
const index = this.form.highlights.indexOf(item);
|
|
if (index > -1) {
|
|
this.form.highlights.splice(index, 1);
|
|
} else {
|
|
this.form.highlights.push(item);
|
|
}
|
|
},
|
|
|
|
// 切换不利因素
|
|
toggleDisadvantage(item) {
|
|
const index = this.form.disadvantages.indexOf(item);
|
|
if (index > -1) {
|
|
this.form.disadvantages.splice(index, 1);
|
|
} else {
|
|
this.form.disadvantages.push(item);
|
|
}
|
|
},
|
|
|
|
// 提交表单
|
|
submit() {
|
|
this.$refs.form.validate().then(res => {
|
|
// 验证必填的图片和视频
|
|
if (this.form.propertyImages.length === 0) {
|
|
uni.showToast({
|
|
title: '请上传产权证照片',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.form.frontImages.length === 0) {
|
|
uni.showToast({
|
|
title: '请上传房屋正面照片',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.form.videos.length === 0) {
|
|
uni.showToast({
|
|
title: '请上传房屋视频',
|
|
icon: 'none'
|
|
});
|
|
return;
|
|
}
|
|
|
|
// 构建与index.vue兼容的提交参数
|
|
const params = {
|
|
userId: uni.getStorageSync('userInfo')?.id || "",
|
|
id: "", // 新增数据，无ID
|
|
classId: this.form.classId, // 使用分类标识
|
|
commonClass: this.commonClass, // 所属分类
|
|
address: this.form.address, // 地址
|
|
homeAge: "", // 户主年龄 - 农房录入无此字段
|
|
homeAz: "", // 是否经过安置 - 默认否
|
|
homeBian: this.form.highlights.join(','), // 房屋周边 - 使用亮点代替
|
|
homeBjsx: "", // 报建手续 - 农房录入无此字段
|
|
homeCai: this.form.vegetableGarden || "", // 菜地面积
|
|
homeCat: "", // 停车 - 农房录入无此字段
|
|
homeGz: "", // 房屋主体是否改造 - 农房录入无此字段
|
|
homeHb: "", // 房屋朝向及海拔 - 农房录入无此字段
|
|
homeBz: this.form.description, // 备注 - 使用房屋介绍
|
|
homeJg: this.form.houseCondition, // 房屋结构 - 使用房屋状况
|
|
homeJl: "", // 距离场镇距离 - 农房录入无此字段
|
|
homeJt: "", // 交通 - 农房录入无此字段
|
|
homeJtzy: "", // 户主家庭职业 - 农房录入无此字段
|
|
homeMi: "", // 面积 - 使用房屋面积
|
|
homeMj: this.form.houseArea, // 房屋面积
|
|
homeMoney: "", // 佣金 - 农房录入无此字段
|
|
homeNo: "", // 房屋编号 - 农房录入无此字段
|
|
homeNum: "1", // 房间数量 - 农房录入无此字段
|
|
homePay: "", // 付款方式及押金 - 农房录入无此字段
|
|
homePj: "", // 邻居对房东评价 - 农房录入无此字段
|
|
homeSd: "", // 水电气网 - 农房录入无此字段
|
|
homeShjl: "", // 距离成都西三环 - 农房录入无此字段
|
|
homeSw: this.form.disadvantages.join(','), // 非正常死亡 - 显示不利因素信息
|
|
homeTf: "", // 府市民云房屋信息档案查询 - 农房录入无此字段
|
|
homeTime: "", // 租期 - 农房录入无此字段
|
|
homeType: this.form.type === 'rent' ? '出租' : '流转', // 户型 - 使用类型
|
|
homeYs: "", // 钥匙 - 默认无
|
|
homeYzmj: this.form.landArea, // 院子总面积 - 使用土地面积
|
|
homeZy: this.form.disadvantages.join(','), // 坟包及电塔 工厂噪音 - 使用不利因素
|
|
iconName: "闲置农房", // 热点名称
|
|
iconTitle: this.form.highlights.join(','), // 标签 - 使用亮点
|
|
num: "0", // 浏览量 - 默认0
|
|
price: this.form.price, // 价格
|
|
timeGo: "", // 年限 - 农房录入无此字段
|
|
title: `${this.form.type === 'rent' ? '出租' : '流转'}-${this.form.address.split('市')[1] || this.form.address}`, // 标题 - 自动生成
|
|
unit: this.form.type === 'rent' ? '元/年' : '万元', // 单位
|
|
image: this.form.frontImages.map(item => item.url).join(','), // 图片 - 使用正面照片
|
|
iconImage: "", // 左上角图标
|
|
homeImage: this.form.propertyImages.map(item => item.url).join(','), // 产权证照片
|
|
homeMp4: this.form.videos.map(item => item.url).join(','), // 视频
|
|
latitude: this.form.latitude,
|
|
longitude: this.form.longitude,
|
|
// 新增字段用于标识农房
|
|
category: 'farmhouse',
|
|
contactName: this.form.contactName,
|
|
contactPhone: this.form.contactPhone
|
|
};
|
|
|
|
console.log('农房提交参数：', params);
|
|
|
|
uni.showLoading({
|
|
title: '提交中...'
|
|
});
|
|
|
|
// 调用统一API
|
|
saveOrUpdateHouse(params).then(response => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: response.message || '提交成功',
|
|
icon: 'success'
|
|
});
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/pages_subpack/successful-apply/index"
|
|
});
|
|
}, 2000);
|
|
}).catch(error => {
|
|
uni.hideLoading();
|
|
uni.showToast({
|
|
title: error.message || '提交失败',
|
|
icon: 'none'
|
|
});
|
|
console.error('农房提交失败：', error);
|
|
});
|
|
|
|
}).catch(errors => {
|
|
console.log('表单验证失败：', errors);
|
|
uni.showToast({
|
|
title: '请补全必填项',
|
|
icon: 'none'
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.container {
|
|
min-height: 100vh;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.header {
|
|
background: linear-gradient(135deg, #1EC77A 0%, #4CAF50 100%);
|
|
padding: 40rpx 40rpx 60rpx;
|
|
color: white;
|
|
}
|
|
|
|
.title {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.form-container {
|
|
background: white;
|
|
margin: -30rpx 20rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
padding: 40rpx;
|
|
box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
margin: 40rpx 0 30rpx;
|
|
padding-left: 20rpx;
|
|
border-left: 6rpx solid #1EC77A;
|
|
}
|
|
|
|
.section-title:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.input-with-unit {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.unit {
|
|
font-size: 26rpx;
|
|
color: #666;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.input-tip {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-top: 10rpx;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.upload-tip {
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
margin-bottom: 10rpx;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.price-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10rpx;
|
|
}
|
|
|
|
.price-unit {
|
|
font-size: 26rpx;
|
|
color: #1EC77A;
|
|
font-weight: bold;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.tags-container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.tag-item {
|
|
padding: 15rpx 25rpx;
|
|
border: 2rpx solid #e0e0e0;
|
|
border-radius: 25rpx;
|
|
font-size: 24rpx;
|
|
color: #666;
|
|
background: #f9f9f9;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.tag-item.tag-selected {
|
|
border-color: #1EC77A;
|
|
background: #1EC77A;
|
|
color: white;
|
|
}
|
|
|
|
.disadvantage-tag.tag-selected {
|
|
border-color: #ff4757;
|
|
background: #ff4757;
|
|
color: white;
|
|
}
|
|
</style>
|