<!--
* @Description: 海淀智慧物业app-
-->
<template>
<div class="economicdevelopment-page overflow_div page-background scoll_box dashboard-page">
<titlepage v-if="pathStr !== '/'" :title="pathName" :query="query"></titlepage>
<!-- <div class="top_box" @click.stop="checkboxGroupShowFn">-->
<!-- <div class="right_icon">-->
<!-- <van-icon name="arrow-down" v-if="!checkboxGroupShow" />-->
<!-- <van-icon name="arrow-up" v-if="checkboxGroupShow" />-->
<!-- </div>-->
<!-- 下拉多选查询 -->
<!-- <p v-for="(item,i) of checkboxGroup" :key="i" @click.stop="deleteCheckbox(item)">-->
<!-- <span>{{ item.name }}</span>-->
<!-- <van-icon name="close" style="transform: scale(1.2);" />-->
<!-- </p>-->
<!-- <div v-if="checkboxGroup.length===0" class="placeholder">请选择小区</div>-->
<!-- </div>-->
<!-- 0805 增加查询项-->
<div class="userLoginSearch">
<a-row :gutter="10">
<a-col :span="12">
<a-select
show-search
v-model="pane.szjz"
:filterOption="filterOption"
style="width: 100%"
@change="handleStreetChange"
placeholder="街镇"
>
<a-select-option :value="item.id" v-for="(item, i) in streetColumns" :key="i" :lable="item.departName">
{{ item.departName }}
</a-select-option>
</a-select>
</a-col>
<a-col :span="12">
<a-select
show-search
v-model="pane.sqmc"
:filterOption="filterOption"
style="width: 100%"
@change="handleSQChange"
placeholder="社区"
>
<a-select-option :value="item.id" v-for="(item, i) in townColumns" :key="i" :lable="item.departName">
{{ item.departName }}
</a-select-option>
</a-select>
</a-col>
</a-row>
<a-row :gutter="10">
<a-col :span="12">
<a-input v-model="pane.xmmc" placeholder="项目名称" @input="handleXmmcInput">
<a-icon slot="suffix" type="search" style="color: #3b77b3" />
</a-input>
</a-col>
<a-col :span="12" style="margin-top: 15px">
<div class="checkboxContainer">
<span>专业化物业</span>
<a-checkbox v-model="sfwzyhwyValue" @change="changeZyhwy" />
</div>
</a-col>
</a-row>
<!-- 新增搜索与重置按钮 -->
<div class="search-reset-btns">
<van-button type="default" color="#3B77B3" block @click="reLoadData">搜索<van-icon style="margin-left: 10px;" name="search" /></van-button>
<van-button type="default" block @click="handleReset" style="background: #f1f3f3; border-radius: 14px; border: 2px solid #3b77b380; color: #3b77b3;">重置<van-icon style="margin-left: 10px;" name="replay" /></van-button>
</div>
</div>
<div class="tabBox">
<!-- <van-tabs v-model:active="activeName" color="#1989fa" @change="changeTab">-->
<!-- <van-tab title="所有项目" name="0">-->
<a-spin :spinning="spinning">
<div class="itemBox" v-for="(item, i) in listData" :key="i" @click="showDetail(item.id)">
<div class="contentBox">
<template>
<div
class="economicdevelopment-page overflow_div page-background scoll_box dashboard-page"
style="width: 64px; height: 64px"
>
<!-- 其他页面内容 -->
<div class="contentBox">
<!-- 左侧视频封面图，点击播放 -->
<div @click.stop="openImage(item)" class="videoThumbnail">
<img v-if="item.sqImg" :src="item.sqImg.split(',')[0]" alt="" style="background-color: white" />
<img v-else src="@/assets/img/suolueErrorImg.png" alt="" style="background-color: white" />
<!-- <van-image
:src="item.sqVideo"
width="50px"
height="50px"
style="border-radius: 5px"
>
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
<template v-slot:error >加载失败</template>
</van-image> -->
</div>
<!-- 项目信息 -->
<div class="msgBox">
<p>{{ item.xmmc ? item.xmmc : '' }}</p>
<p>物业服务企业:{{ item.wyfwqy ? item.wyfwqy : '暂无企业' }}</p>
<p>更新时间: {{ item.updateTime ? item.updateTime : '暂无更新时间' }}</p>
</div>
</div>
<!-- 其他页面内容 -->
</div>
</template>
<!-- <div class="imgBox">
<template v-if="item.imgUrl">
<van-image :src="item.imgUrl" width="50px" height="50px" style="border-radius: 5px;">
<template v-slot:loading>
<van-loading type="spinner" size="20" />
</template>
<template v-slot:error>加载失败</template>
</van-image>
</template>
<template v-else>
<div
style="
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: #f0f0f0;
color: #999;
font-size: 12px;
"
>
暂无图片
</div>
</template>
</div> -->
<div class="msgBox">
<p>{{ item.xmmc ? item.xmmc : '' }}</p>
<p>物业服务企业:{{ item.wyfwqy ? item.wyfwqy : '暂无企业' }}</p>
<p>
更新时间:
{{ item.updateTime ? item.updateTime : '暂无更新时间' }}
</p>
</div>
<!-- <van-icon class="iconBox" name="edit" /> -->
</div>
<div
class="typeBox"
v-if="item.fwxz && item.fwxz.length > 0"
:class="[
item.fwxz == 1 || item.fwxz == 2 || item.fwxz == 3 || item.fwxz == 4 || item.fwxz == 5
? 'personalType'
: 'publicType'
]"
>
<span v-for="(item1, i1) in item.fwxz" :key="i1">
<span v-if="item1 == 1"> 商品住宅 </span>
<span v-if="item1 == 2"> 商住两用 </span>
<span v-if="item1 == 3"> 共有产权 </span>
<span v-if="item1 == 4"> 保障性住房(经适房、公租房等) ) </span>
<span v-if="item1 == 5"> 直管公房 </span>
<span v-if="item1 == 6"> 军产房 </span>
<span v-if="item1 == 7"> 三供一业 </span>
<span v-if="item1 == 8"> 非经资产移交 </span>
<span v-if="item1 == 9"> 房改售房 </span>
<span v-if="item1 == 10"> 回迁安置房 </span>
<span v-if="item1 == -99"> 其他 </span>
</span>
</div>
<!-- <div v-else></div> -->
</div>
<a-button class="moreBtn" @click="getprojectListMsg" :disabled="moreDisabled">
{{ moreText }}
<van-icon name="arrow-down" />
</a-button>
<!-- 增加一个空div 顶高度-->
<div style="height: 100px; width: 100%"></div>
</a-spin>
<!-- </van-tab>-->
<!-- <van-tab title="小区列表" name="1">-->
<!-- <div style="font-size: 14px">-->
<!-- <div class="itemBox" v-for="(item, i) in tab2ListData" :key="i" @click="showDetail(item.id)">-->
<!-- <div class="contentBox">-->
<!-- <div class="imgBox">-->
<!-- <!– <van-image src="" width="50px" height="50px">-->
<!-- <template v-slot:loading>-->
<!-- <van-loading type="spinner" size="20" />-->
<!-- </template>-->
<!-- </van-image> –>-->
<!-- <template v-if="item.imgUrl">-->
<!-- <van-image :src="item.imgUrl" width="50px" height="50px">-->
<!-- <template v-slot:loading>-->
<!-- <van-loading type="spinner" size="20" />-->
<!-- </template>-->
<!-- <template v-slot:error>加载失败</template>-->
<!-- </van-image>-->
<!-- </template>-->
<!-- <template v-else>-->
<!-- <div-->
<!-- style="-->
<!-- margin-top: 20px;-->
<!-- width: 50px;-->
<!-- height: 50px;-->
<!-- display: flex;-->
<!-- align-items: center;-->
<!-- justify-content: center;-->
<!-- background: #f0f0f0;-->
<!-- color: #999;-->
<!-- font-size: 12px;-->
<!-- "-->
<!-- >-->
<!-- 暂无图片-->
<!-- </div>-->
<!-- </template>-->
<!-- </div>-->
<!-- <div class="msgBox">-->
<!-- <p>{{ item.xmmc ? item.xmmc : '' }}</p>-->
<!-- <p>物业服务企业:{{ item.wyfwqy ? item.wyfwqy : '暂无企业' }}</p>-->
<!-- <p>-->
<!-- 更新时间:-->
<!-- {{ item.updateTime ? item.updateTime : '暂无更新时间' }}-->
<!-- </p>-->
<!-- </div>-->
<!-- <!– <van-icon class="iconBox" name="edit" /> –>-->
<!-- </div>-->
<!-- <div-->
<!-- class="typeBox"-->
<!-- v-if="item.fwxz"-->
<!-- :class="[-->
<!-- item.fwxz == 1 || item.fwxz == 2 || item.fwxz == 3 || item.fwxz == 4 || item.fwxz == 5-->
<!-- ? 'personalType'-->
<!-- : 'publicType'-->
<!-- ]"-->
<!-- >-->
<!-- <span v-for="(item1, i1) in item.fwxz" :key="i1">-->
<!-- <span v-if="item1 == 1"> 商品住宅 </span>-->
<!-- <span v-if="item1 == 2"> 商住两用 </span>-->
<!-- <span v-if="item1 == 3"> 共有产权 </span>-->
<!-- <span v-if="item1 == 4"> 保障性住房(经适房、公租房等) ) </span>-->
<!-- <span v-if="item1 == 5"> 直管公房 </span>-->
<!-- <span v-if="item1 == 6"> 军产房 </span>-->
<!-- <span v-if="item1 == 7"> 三供一业 </span>-->
<!-- <span v-if="item1 == 8"> 非经资产移交 </span>-->
<!-- <span v-if="item1 == 9"> 房改售房 </span>-->
<!-- <span v-if="item1 == 10"> 回迁安置房 </span>-->
<!-- <span v-if="item1 == -99"> 其他 </span>-->
<!-- </span>-->
<!-- </div>-->
<!-- <div v-else></div>-->
<!-- </div>-->
<!-- <a-button class="moreBtn" @click="getTab2List" :disabled="moreDisabled">-->
<!-- {{ moreText }}-->
<!-- <van-icon name="arrow-down" />-->
<!-- </a-button>-->
<!-- </div>-->
<!-- </van-tab>-->
<!-- </van-tabs>-->
</div>
<!-- 视频弹窗 -->
<!-- <van-popup
v-model:show="showVideoPopup"
position="center"
:style="{ width: '90%', maxHeight: '80%',backGround:'transparent' }"
:closeable="true"
@close.stop="closeVideo"
>
<div class="video-popup-content">
<video :src="currentVideoUrl" controls autoplay style="width: 100%; height: 100%; border-radius: 10px"></video>
</div>
</van-popup> -->
<van-popup
v-model:show="showImagePopup"
position="center"
:style="{ width: '90%', height: '80%' }"
:closeable="true"
@close="closeImage"
>
<div class="image-popup-content">
<img :src="currentImageUrls[currentIndex]" alt="查看大图" style="width: 100%; height: auto;" />
<div class="nav-buttons">
<van-button v-if="currentIndex > 0" @click="prevImage">上一张</van-button>
<van-button v-if="currentIndex < currentImageUrls.length - 1" @click="nextImage">下一张</van-button>
</div>
</div>
</van-popup>
<!-- <div class="container">-->
<!-- <div v-for="(item,i) of notifyList" class="project_list_item">-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="fixedBox">
专题
<br />图层
</div> -->
<!-- 顶部小区查询项弹框 -->
<!-- <van-popup-->
<!-- v-model="checkboxGroupShow"-->
<!-- position="bottom"-->
<!-- :style="{ height: '50%',zIndex:9999 }">-->
<!-- <div class="my_checkbox_popup">-->
<!-- <p class="cancel" @click="cancel(true)">取消</p>-->
<!-- <p class="confirm" @click="comfirm">确认</p>-->
<!-- </div>-->
<!-- <van-checkbox-group v-model="checkboxGroupIds">-->
<!-- <van-cell-group>-->
<!-- <van-cell-->
<!-- class="my_checkbox_popup_cell"-->
<!-- v-for="(items, index) in dataOption"-->
<!-- clickable-->
<!-- :key="index"-->
<!-- :title="items.name"-->
<!-- @click="onSelect(items,index)">-->
<!-- <template #right-icon>-->
<!-- <van-checkbox :name="items.id" ref="CoverableCities" class="my_checkbox_popup_item" />-->
<!-- </template>-->
<!-- </van-cell>-->
<!-- </van-cell-group>-->
<!-- </van-checkbox-group>-->
<!-- </van-popup>-->
</div>
</template>
<script>
import rolemixins from '@/utils/rolemixins';
import { managerListMsg, xioaquList, xioaquVideoList } from '@/api/comm';
import { getSendRangeData } from '@/api/home';
import { getSqmcData } from '@/api/userState';
export default {
name: 'projectList',
components: {},
mixins: [rolemixins],
data() {
return {
showVideoPopup: false,
currentVideoUrl: null,
showImagePopup: false,
currentImageUrls: [],
currentIndex: 0,
listData: [], // 假设 listData 会从接口获取
// currentVideoUrl: 'https://www.w3schools.com/html/mov_bbb.mp4', // 一个测试视频地址
// listData: [
// {
// id: 1,
// xmmc: '项目A',
// imgUrl: 'https://via.placeholder.com/50x50?text=Video+1',
// hasVideo: true // 假设这个项目有视频
// },
// {
// id: 2,
// xmmc: '项目B',
// imgUrl: '',
// hasVideo: false // 假设这个项目没有视频
// },
// {
// id: 3,
// xmmc: '项目C',
// imgUrl: 'https://via.placeholder.com/50x50?text=Video+2',
// hasVideo: true
// }
// ],
tab2ListData: [],
activeName: 'tab1',
pathStr: this.$route.path,
pathName: this.$route.meta.title ? this.$route.meta.title : '',
query: {},
//分页
pane: {
pageNo: 1,
total: 0,
pageSize: 10,
xmmc: '', // 项目名称
szjz: undefined, // 街镇
sqmc: undefined, // 社区
sfwzyhwy: 1 // 新增字段，1 表示专业化物业选中
},
sfwzyhwyValue: true,
moreDisabled: false,
moreText: '加载更多',
streetColumns: [],
townColumns: [],
spinning: false,
timer: null,
};
},
created() {},
activated() {},
beforeDestroy() {
if (this.timer) {
clearTimeout(this.timer);
}
},
mounted() {
// this.initCheckboxGroup();
// this.getData();
this.getprojectListMsg(); // 获取项目列表
this.getStreetData();
// 假装调用接口成功，使用假数据填充 listData
// this.listData = [
// {
// id: 1,
// xmmc: '项目A',
// imgUrl: 'https://via.placeholder.com/50x50?text=Video+1',
// hasVideo: true
// },
// {
// id: 2,
// xmmc: '项目B',
// imgUrl: '',
// hasVideo: false
// },
// {
// id: 3,
// xmmc: '项目C',
// imgUrl: 'https://via.placeholder.com/50x50?text=Video+2',
// hasVideo: true
// }
// ];
},
methods: {
// 获取单个项目的视频地址
async fetchVideoUrl(item) {
try {
const res = await xioaquVideoList({ id: item.id });
console.error('1111111==============>', { id: '1839890114125811716' });
// const res = await managerListMsg({ id: '1839890114125811716' });
console.log('接口返回:', res); // 打印调试
const data = res.data || {};
if (data.sqVideo && data.sqVideo.trim()) {
item.videoUrl = data.sqVideo;
} else {
this.$toast('该条目无视频');
}
} catch (error) {
console.error('获取视频失败:', error);
item.videoUrl = null;
this.$toast('获取视频失败');
}
},
// openVideo(item) {
// if (item.sqVideo) {
// this.currentVideoUrl = item.sqVideo;
// this.showVideoPopup = true;
// } else {
// this.$toast('暂无视频');
// }
// },
openImage(item) {
if (item.sqImg) {
this.currentImageUrls = item.sqImg.split(',').map(url => url.trim()).filter(url => url);
this.currentIndex = 0;
this.showImagePopup = true;
} else {
this.$toast('暂无图片');
}
},
closeImage() {
this.showImagePopup = false;
this.currentImageUrls = [];
this.currentIndex = 0;
},
prevImage() {
if (this.currentIndex > 0) {
this.currentIndex--;
}
},
nextImage() {
if (this.currentIndex < this.currentImageUrls.length - 1) {
this.currentIndex++;
}
},
closeVideo() {
this.currentVideoUrl = null;
},
// 切换tab
changeTab(tab) {
this.activeName = tab;
// this.getTab2List();
console.log('ffffff', tab);
this.pane.pageNo = 1;
this.moreDisabled = false;
this.moreText = '加载更多';
this.pane.total = 0;
this.listData = [];
this.tab2ListData = [];
if (tab == '0') {
this.getprojectListMsg();
} else {
this.getTab2List();
}
},
// 获取数据列表接口
getData() {
let params = {
id: 1
};
},
// 获取所有项目
async getprojectListMsg() {
this.spinning = true;
const res = await managerListMsg(this.pane);
if (res.success) {
this.pane.total = res.result.total;
this.listData = [...this.listData, ...res.result.records];
this.listData.forEach((item) => {
if (item.fwxz && !Array.isArray(item.fwxz)) {
item.fwxz = item.fwxz.split(',');
} else {
item.fwxz = item.fwxz || [];
}
});
this.$forceUpdate();
if (this.listData.length >= this.pane.total) {
this.moreDisabled = true;
this.moreText = '没有更多了';
} else {
this.moreDisabled = false;
this.moreText = '加载更多';
}
this.pane.pageNo += 1;
}
this.spinning = false;
},
// 获取小区列表
getTab2List() {
xioaquList(this.pane).then((res) => {
this.pane.total = res.result.total;
this.pane.pageNo = this.pane.pageNo + 1;
if (res.code == 200) {
if (res.result.records.length < this.pane.pageSize) {
this.moreDisabled = true;
this.moreText = '没有更多了';
this.tab2ListData = [...this.tab2ListData, ...res.result.records];
this.$forceUpdate();
} else {
this.moreDisabled = false;
this.moreText = '加载更多';
this.tab2ListData = [...this.tab2ListData, ...res.result.records];
this.$forceUpdate();
}
}
});
},
// 跳转项目信息详情
filterOption(inputValue, option) {
return option.data.attrs.lable ? option.data.attrs.lable.includes(inputValue) : null;
},
handleXmmcInput(value) {
// 延迟请求，避免频繁输入导致频繁搜索
if (this.searchTimer) {
clearTimeout(this.searchTimer);
}
this.searchTimer = setTimeout(() => {
this.pane.pageNo = 1;
this.listData = [];
this.getprojectListMsg(); // 重新加载数据
}, 500);
},
// 获取街镇数据以及社区数据
getStreetData() {
getSendRangeData().then((res) => {
this.streetColumns = res.result;
});
},
// 获取社区数据
getTownData(val) {
getSqmcData({ id: val }).then((res) => {
this.townColumns = res.result;
});
},
handleTownConfirm(val) {
this.sqmcName = val.departName;
this.pane.sqmc = val.id;
this.townPicker = false;
},
handleSearch() {
console.log(this.pane);
this.pane.pageNo = 1;
this.moreDisabled = false;
this.moreText = '加载更多';
this.listData = [];
this.getprojectListMsg();
},
handleReset() {
this.pane = {
xmmc: '',
szjz: undefined,
sqmc: undefined,
pageNo: 1,
pageSize: 10,
total: 0
};
this.moreDisabled = false;
this.townColumns = [];
this.moreDisabled = false;
this.moreText = '加载更多';
this.listData = [];
this.$nextTick(() => {
this.$forceUpdate;
});
this.getprojectListMsg();
},
showDetail(id) {
this.$router.push({
path: '/listDetail',
query: {
id: id
}
});
},
changeZyhwy(e) {
this.pane.sfwzyhwy = this.sfwzyhwyValue ? 1 : 0;
this.reLoadData();
},
handleStreetChange(val) {
// 清空社区
this.pane.sqmc = undefined;
this.getTownData(val);
// this.reLoadData();
},
handleSQChange(val) {
this.pane.sqmc = val;
// this.reLoadData();
},
reLoadData() {
this.pane.pageNo = 1;
this.moreDisabled = false;
this.moreText = '加载更多';
this.listData = [];
this.getprojectListMsg();
}
// changeXmmc(e) {
// if (this.timer) {
// clearTimeout(this.timer);
// }
// this.timer = setTimeout(() => {
// this.moreDisabled = false;
// this.moreText = '加载更多';
// this.listData = [];
// // this.getprojectListMsg();
// }, 1000);
// }
// checkboxGroupShowFn() {
// this.checkboxGroupShow = true;
// }
// initCheckboxGroup() {
// this.checkboxGroupIds = [];
// this.checkboxGroup = [];
// },
// onSelect(items, index) {
// this.$refs.CoverableCities[index].toggle();
// },
// comfirm() {
// let text = [];
// this.dataOption.map((its, i) => {
// if (this.checkboxGroupIds.indexOf(its.id) !== -1) {
// text.push(its);
// }
// });
// this.checkboxGroup = text;
// this.$forceUpdate();
// this.cancel(false);
// },
// cancel(flag) {
// this.$forceUpdate();
// this.checkboxGroupShow = false;
// if (flag) {
// this.initCheckboxGroup();
// }
// },
// deleteCheckbox(item) {
// this.checkboxGroup.map((its, index) => {
// if (item.id === its.id) {
// this.checkboxGroup.splice(index, 1);
// }
// });
// this.checkboxGroupIds = this.checkboxGroup.map(its => {
// return its.id;
// });
// console.log(this.checkboxGroup, this.checkboxGroupIds, '----deleteCheckbox');
// }
}
};
</script>
<style scoped lang="less">
@import '~@/assets/css/comm.less';
::v-deep .van-popup{
background-color: transparent !important;
}
.videoError {
width: 50px;
height: 50px;
}
.economicdevelopment-page {
height: 100%;
.fixedBox {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 5px 5px 5px #ccc, -5px -5px 5px #ccc, 5px -5px 5px #ccc, -5px 5px 5px #ccc;
position: absolute;
bottom: 20px;
right: 20px;
background: #fff;
font-size: 14px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.top_box {
width: auto;
height: 40px;
background: #fff;
border: 1px solid #3b77b3;
position: relative;
display: flex;
align-items: center;
padding: 0 5px;
margin: 0 10px;
.right_icon {
position: absolute;
top: 5px;
right: 10px;
}
p {
padding: 5px 10px 20px 10px;
height: 24px;
background: rgba(59, 119, 179, 0.15);
border-radius: 12px;
border: 1px solid rgba(59, 119, 179, 0.5);
color: #3b77b3;
font-size: 12px;
font-weight: 500;
font-family: PingFangSC, PingFang SC;
margin: 0 2px;
span {
display: inline-block;
margin-right: 10px;
}
}
div.placeholder {
width: 100%;
color: #d4d3d3;
font-size: 16px;
font-weight: normal;
text-align: center;
}
}
/deep/ .van-tabs__content {
overflow-y: scroll;
}
.tabBox {
width: auto;
margin: 0 10px;
margin-top: 5px;
height: 65vh;
overflow: hidden;
overflow-y: scroll;
.itemBox {
width: 100%;
//height: 80px;
position: relative;
font-size: 12px;
padding: 20px 0px 15px 0px;
background: #fff;
margin-bottom: 10px;
display: flex;
align-items: flex-end;
margin-top: 5px;
.contentBox {
display: flex;
justify-content: space-around;
text-align: center;
width: 100%;
.video-popup-content {
// padding: 10px;
background: #000;
}
.iconBox {
font-size: 26px;
width: auto;
height: 30px;
line-height: 60px;
}
.msgBox {
text-align: left;
width: 200px;
}
.imgBox {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
}
.typeBox {
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
position: absolute;
height: 20px;
line-height: 20px;
top: 0;
right: 10px;
text-align: center;
padding: 0 5px;
max-width: 50%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.personalType {
background: #e99d42;
}
.publicType {
background: #a2ef4d;
}
}
}
//.container {
// height: 100% !important;
// padding: 0 12.5px;
//
//}
}
.my_checkbox_popup {
width: 100%;
height: 45px;
line-height: 45px;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
p {
height: 100%;
padding: 0 0.42667rem;
font-size: 0.37333rem;
background-color: transparent;
border: none;
cursor: pointer;
}
p.cancel {
color: #969799;
}
p.confirm {
color: #576b95;
}
}
.my_checkbox_popup_cell {
/deep/ .van-cell__title {
padding: 8px 10px;
}
}
.my_checkbox_popup_item {
padding: 10px 15px;
}
.moreBtn {
text-align: center;
color: #1989fa;
border: none;
width: 100%;
background: #f1f3f3;
}
.userLoginSearch {
// background-color: #fff;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
.checkboxContainer {
background-color: #f1f3f3;
width: 100%;
border-radius: 10px;
border: 1px solid #3b77b3;
font-size: 14px;
padding: 0 8px;
height: 32px;
line-height: 32px;
display: flex;
align-items: center;
justify-content: space-between;
color: #3b77b3;
}
}
.search-reset-btns {
width: 100%;
margin-top: 15px;
justify-content: space-between;
// background-color: #3c78b1;
display: flex;
gap: 10px;
.van-button {
border-radius: 14px;
height: 36.69px;
// background-color: transparent;
flex: 1;
font-size: 14px;
color: #f1f3f3;
img{
width: 20px;
height: 20px;
margin-left: 11px;
}
}
}
::v-deep .ant-select-selection {
border-color: #3b77b3;
border-radius: 10px;
color: #3b77b3;
.ant-select-selection__placeholder {
color: #3b77b3;
}
}
::v-deep .ant-input {
border-color: #3b77b3;
border-radius: 10px;
padding-left: 8px;
color: #3b77b3;
&::placeholder {
color: #3b77b3;
}
}
</style>
为啥前面的图片有是img图片,出现了一个p标签,里面有字体内容
最新发布
本文详细介绍了HTML5中input元素的disabled属性，解释了如何通过此属性禁用输入字段，以及如何利用JavaScript动态控制输入字段的可用状态。文章还提到了disabled属性的一些限制条件。
扫一扫
730
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
