From 6d4e23a29f40b4739aa46436e5b703ecde4b39aa Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期三, 14 四月 2021 11:37:00 +0800 Subject: [PATCH] table数据 --- src/components/panel/topicSearch/SolidWasteSearch.vue | 176 +++++++++------------------------------------------------- 1 files changed, 27 insertions(+), 149 deletions(-) diff --git a/src/components/panel/topicSearch/SolidWasteSearch.vue b/src/components/panel/topicSearch/SolidWasteSearch.vue index 3627d14..ea1c17d 100644 --- a/src/components/panel/topicSearch/SolidWasteSearch.vue +++ b/src/components/panel/topicSearch/SolidWasteSearch.vue @@ -1,9 +1,6 @@ <template> - <div class="solidwaste-search" v-if="judgeVisible"> - <div class="search-title"> - <span>鍥哄簾</span> - <!-- <span>{{ title }}</span>--> - </div> + <div class="sewers-search" v-if="judgeVisible"> + <div class="panel-title">{{title}}</div> <div class="search-panel "> <el-form ref="form" :model="form" label-width="90px" class="search-form"> <el-form-item v-for="(item,index) in solidWasteTypeOptions" :key="index" :label="item.label+'锛�'" size="mini" @@ -18,73 +15,31 @@ </el-option> </el-select> </el-form-item> - <div class="search-radio"> + <!-- <div class="search-radio"> <el-radio v-model="radio" label="1">鍏ㄩ儴</el-radio> <el-radio v-model="radio" label="2">姝e父</el-radio> <el-radio v-model="radio" label="3">棰勮</el-radio> + </div> --> + <el-radio-group v-model="form.type" class="levelOfRisk"> + <el-radio v-for="(item,index) in levelOfRisk" :label="item.value" :key="index"><span class="levelOfRisk-type">{{item.name}}</span></el-radio> + </el-radio-group> + + <div class="rightButtonSearch"> + <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"></el-input> + <el-button class="el-icon-search" @click="handleSearch"></el-button> </div> - <el-input v-model="form.keyword" size="mini" placeholder="鍦ㄦ杈撳叆鍏抽敭瀛楁悳绱�"> - <i slot="suffix" class="search-btn el-input__icon el-icon-search" @click="handleSearch"></i> - </el-input> </el-form> - <el-scrollbar style="height:500px"> - <div class="environmental-risk-list"> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - <div class="environmental-risk-list"><!-- v-for="(item,index) in list" :key="index" --> - <i class="state"></i> - <div> - <h3>###鐐煎寲閮�</h3> - <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> - <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> - </div> - </div> - </el-scrollbar> - <!-- <el-card class="box-card"--> - <!-- v-for="(item,index) in searchDataDisplay"--> - <!-- :key="index">--> - <!-- <div>--> - <!-- {{ item.CompanyName }}--> - <!-- </div>--> - <!-- </el-card>--> </div> + <el-scrollbar style="height:286.22px"> + <div class="environmental-risk-list" v-for="(item,index) in searchDataDisplay" :key="index" ><!-- v-for="(item,index) in list" :key="index" --> + <i class="state"></i> + <div> + <h3>###鐐煎寲閮�</h3> + <p>鎵�灞為儴闂細<span>鐐煎寲閮�</span></p> + <p>椋庨櫓绾у埆锛�<span>涓夌骇</span></p> + </div> + </div> + </el-scrollbar> </div> </template> @@ -97,6 +52,11 @@ props: ['title'], data () { return { + levelOfRisk: [ + { name: '鍏ㄩ儴', value: '1' }, + { name: '姝e父', value: '2' }, + { name: '棰勮', value: '3' } + ], judgeVisible: true, solidWasteTypeOptions: [{ value: '1', @@ -169,6 +129,7 @@ // 鏁版嵁鐨勪紶閫� transferData: '' }, + // 鏁版嵁鎼滅储涔嬪悗锛屽瓨鍌ㄦ暟鎹殑 searchDataDisplay: [] } }, @@ -197,88 +158,5 @@ </script> <style lang="less" scoped> -.el-radio.is-checked .levelOfRisk-type { - color: #409EFF -} -.levelOfRisk { - padding-left: 20px -} - -.levelOfRisk .el-radio { - padding-bottom: 6px -} - -.environmental-risk-list { - border: 1px solid @color; - margin-right: 10px; - margin-bottom: 15px; - position: relative; - padding-left: 50px; - padding-top: 3px; - padding-bottom: 3px; - color: #f5f5f5; - - .state { - width: 30px; - height: 30px; - position: absolute; - top: 50%; - left: 10px; - margin-top: -15px; - border-radius: 50%; - box-shadow: 0 0 3px #000; - background: #0B3B6D; - } -} - -.el-input { - margin: 15px auto; -} - -.solidwaste-search { - position: relative; - overflow: hidden; - - .search-panel { - background-color: transparent; - border: 1px solid @background-color-split; - padding: 10px; - - /deep/ input { - border-radius: 0; - background-color: @background-color-split; - border: solid 1px @color; - color: @color-gray; - font-size: 0.01rem; - - .el-select .el-input.is-focus .el-input__inner { - border-color: @color; - } - } - - /deep/ input:focus { - border-color: @color; - } - } - - .search-btn { - } - - .search-radio { - margin: 15px auto; - display: flex; - align-items: center; - justify-content: space-around; - } - - .location-btn:hover, .el-input__icon:hover { - color: @color; - cursor: pointer; - } - - .box-card { - margin: 15px auto; - } -} </style> -- Gitblit v1.8.0